Het verkrijgen van het doelelement bij het bubbelen van gebeurtenissen

Stel we hebben twee elementen: div en een alinea p, die binnen deze div ligt:

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

Laten we een referentie naar onze div in een variabele zetten:

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

Laten we enkele stijlen toevoegen aan onze tags:

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

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

Stel dat er nu een klik-handler op de div is geplaatst:

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

Omdat onze div padding heeft, kunnen we, wanneer we op de div klikken, op de alinea klikken, of we kunnen op een plek klikken waar deze alinea niet is, dus direct op de div.

Hierbij zal this in de klik-handler altijd verwijzen naar het element waar de handler op is geplaatst. In ons geval is dit onze div:

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

Echter, we kunnen precies die tag verkrijgen, waarin de gebeurtenis plaatsvond. Hiervoor kunnen we kijken wat er in event.target staat:

div.addEventListener('click', function(event) {
	console.log(event.target); // ofwel div, ofwel alinea
});

We kunnen deze twee opties onderscheiden met behulp van voorwaarden:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('klik precies op de div');
	}
	if (event.target.tagName === 'P') {
		console.log('klik precies op de alinea');
	}
});

In plaats van tagName kunnen we matches gebruiken:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('klik precies op de div');
	}
	if (event.target.matches('p')) {
		console.log('klik precies op de alinea');
	}
});

De volgende elementen zijn gegeven:

<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;
}

Plaats een klik-handler op de div. In deze handler bepaal je in welke van de tags de gebeurtenis heeft plaatsgevonden.

Wijzig de vorige opdracht. Zorg ervoor dat wanneer er op een li wordt geklikt, er een uitroepteken aan het einde wordt toegevoegd, en wanneer er op ul wordt geklikt, er informatie hierover naar de console wordt uitgevoerd.