Att få målelementet vid händelseutbubbling

Låt oss säga att vi har två element: div och ett stycke p som ligger inuti denna div:

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

Låt oss få en referens till vår div i en variabel:

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

Låt oss lägga till några stilar till våra taggar:

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

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

Låt oss nu sätta en klickhanterare på diven:

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

Eftersom vår div har padding, när vi klickar på diven, kan vi träffa stycket, eller så kan vi träffa en plats där detta stycke inte finns, det vill säga direkt på diven.

I klickhanteraren kommer this alltid att peka på det element som hanteraren är satt på. I vårt fall är det vår div:

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

Men vi kan få exakt den tagg där händelsen inträffade. För detta kan vi titta på vad som finns i event.target:

div.addEventListener('click', function(event) {
	console.log(event.target); // antingen diven eller stycket
});

Man kan skilja mellan dessa två alternativ med hjälp av villkor:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('klick direkt på diven');
	}
	if (event.target.tagName === 'P') {
		console.log('klick direkt på stycket');
	}
});

Istället för tagName kan man använda matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('klick direkt på diven');
	}
	if (event.target.matches('p')) {
		console.log('klick direkt på stycket');
	}
});

Följande element ges:

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

Sätt en klickhanterare på diven. I denna hanterare, avgör i vilken av taggarna händelsen utlöstes.

Modifiera föregående uppgift. Gör så att när man klickar på li, läggs ett utropstecken till i slutet av den, och när man klickar på ul skrivs information om detta ut i konsolen.