Hentning af målelement ved event bubbling

Lad os sige, at vi har to elementer: div og et afsnit p, som ligger inde i denne div:

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

Lad os hente en reference til vores div i en variabel:

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

Lad os tilføje nogle stilarter til vores tags:

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

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

Lad os nu sige, at der er en klik-håndterer sat på div'en:

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

På grund af at vores div har padding, kan vi, når vi klikker på div'en, enten ramme afsnittet, eller vi kan ramme et sted, hvor afsnittet ikke er, det vil sige direkte på div'en.

I denne tilfælde vil this i klik-håndtereren altid pege på det element, som håndtereren er sat på. I vores tilfælde er det vores div:

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

Dog kan vi få præcis det tag, hvor begivenheden indtraf. For at gøre dette kan vi se, hvad der ligger i event.target:

div.addEventListener('click', function(event) {
	console.log(event.target); // enten div'en eller afsnittet
});

Man kan skelne mellem disse to tilfælde ved hjælp af betingelser:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('klik præcis på div\'en');
	}
	if (event.target.tagName === 'P') {
		console.log('klik præcis på afsnittet');
	}
});

Man kan i stedet for tagName bruge matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('klik præcis på div\'en');
	}
	if (event.target.matches('p')) {
		console.log('klik præcis på afsnittet');
	}
});

Følgende elementer er givet:

<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æt en klik-håndterer på div'en. I denne håndterer skal du afgøre, i hvilket af tags'ene begivenheden indtraf.

Modificer den foregående opgave. Gør det sådan, at når der klikkes på li, tilføjes der et udråbstegn til slutningen af den, og når der klikkes på ul, udskrives information om dette i konsollen.