Uzyskiwanie elementu docelowego podczas propagacji zdarzeń

Załóżmy, że mamy dwa elementy: div i akapit p, znajdujący się wewnątrz tego diva:

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

Pobierzmy referencję do naszego diva do zmiennej:

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

Dodajmy naszym znacznikom jakieś style:

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

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

Załóżmy teraz, że na diva jest zawieszony nasłuchiwacz kliknięcia:

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

Z powodu tego, że nasz div ma padding, gdy klikamy w diva, możemy trafić w akapit, albo możemy trafić w miejsce, gdzie tego akapitu nie ma, czyli bezpośrednio w diva.

Przy tym w nasłuchiwaczu kliknięcia this zawsze będzie wskazywać na ten element, na który jest zawieszony nasłuchiwacz. W naszym przypadku to nasz div:

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

Jednakże, możemy uzyskać dokładnie ten znacznik, w którym zdarzenie wystąpiło. W tym celu możemy sprawdzić, co znajduje się w event.target:

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

Można rozróżnić te dwa warianty za pomocą warunków:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('kliknięcie dokładnie w diva');
	}
	if (event.target.tagName === 'P') {
		console.log('kliknięcie dokładnie w akapit');
	}
});

Zamiast tagName można użyć matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('kliknięcie dokładnie w diva');
	}
	if (event.target.matches('p')) {
		console.log('kliknięcie dokładnie w akapit');
	}
});

Dane są następujące elementy:

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

Zawieś na diva nasłuchiwacz kliknięcia. W tym nasłuchiwaczu określ, w którym ze znaczników wystąpiło zdarzenie.

Zmodyfikuj poprzednie zadanie. Spraw, aby po kliknięciu w li, na jej koniec dodawał się wykrzyknik, a po kliknięciu w ul w konsoli wypisywała się informacja o tym.