Abrufen des Zielelements beim Event-Bubbling

Nehmen wir an, wir haben zwei Elemente: div und einen Absatz p, der innerhalb dieses Divs liegt:

<div>
	<p></p>
</div>

Holen wir uns einen Verweis auf unser Div in eine Variable:

let div = document.querySelector('div');

Fügen wir unseren Tags einige Styles hinzu:

div {
	padding: 20px;
	border: 1px solid red;
}

p {
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Nehmen wir nun an, ein Click-Event-Handler ist auf das Div gelegt:

div.addEventListener('click', function() {
	console.log('click');
});

Da unser Div Padding hat, können wir, wenn wir auf das Div klicken, entweder auf den Absatz klicken oder auf eine Stelle, an der sich dieser Absatz nicht befindet, also direkt auf das Div.

Dabei zeigt this im Click-Handler immer auf das Element, an das der Handler angehängt ist. In unserem Fall ist das unser Div:

div.addEventListener('click', function() {
	console.log(this); // das Div
});

Wir können jedoch genau den Tag erhalten, in dem das Event stattgefunden hat. Dazu können wir nachschauen, was in event.target liegt:

div.addEventListener('click', function(event) {
	console.log(event.target); // entweder das Div oder der Absatz
});

Man kann diese beiden Fälle mit Hilfe von Bedingungen unterscheiden:

let div = document.querySelector('div');

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('Klick genau auf das Div');
	}
	if (event.target.tagName === 'P') {
		console.log('Klick genau auf den Absatz');
	}
});

Anstelle von tagName kann man matches verwenden:

let div = document.querySelector('div');

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('Klick genau auf das Div');
	}
	if (event.target.matches('p')) {
		console.log('Klick genau auf den Absatz');
	}
});

Folgende Elemente sind gegeben:

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
</div>

div, ul, li {
	padding: 20px;
}

div {
	border: 1px solid red;
}
ul {
	border: 1px solid orange;
}
li {
	border: 1px solid green;
}

Legen Sie einen Click-Handler auf das Div. Bestimmen Sie in diesem Handler, in welchem der Tags das Event ausgelöst wurde.

Modifizieren Sie die vorherige Aufgabe. Sorgen Sie dafür, dass bei einem Klick auf li ein Ausrufezeichen ans Ende hinzugefügt wird, und bei einem Klick auf ul eine Information dazu in der Konsole ausgegeben wird.