Získanie cieľového elementu pri bublaní udalostí

Majme dva elementy: div a odsek p, ktorý sa nachádza vo vnútri tohto divu:

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

Získajme odkaz na náš div do premennej:

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

Pridajme našim elementom nejaké štýly:

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

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

Nech je teraz na div pripojený obslužný program kliknutia:

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

Pretože náš div má padding, keď klikneme na div, môžeme kliknúť na odsek, alebo môžeme kliknúť na miesto, kde odsek nie je, teda priamo na div.

V obslužnom programe kliknutia this vždy bude ukazovať na element, na ktorý je pripojený obslužný program. V našom prípade je to náš div:

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

Avšak, môžeme získať presne ten element, v ktorom nastala udalosť. Na to môžeme pozrieť, čo je v event.target:

div.addEventListener('click', function(event) {
	console.log(event.target); // buď div, alebo odsek
});

Tieto dve možnosti môžeme rozlíšiť pomocou podmienok:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('kliknutie priamo na div');
	}
	if (event.target.tagName === 'P') {
		console.log('kliknutie priamo na odsek');
	}
});

Namiesto tagName môžeme použiť matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('kliknutie priamo na div');
	}
	if (event.target.matches('p')) {
		console.log('kliknutie priamo na odsek');
	}
});

Sú dané nasledujú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;
}

Pripojte na div obslužný program kliknutia. V tomto obslužnom programe určite, na ktorom z elementov nastala udalosť.

Upravte predchádzajúcu úlohu. Urobte tak, aby sa pri kliknutí na li, na jej koniec pridal výkričník, a pri kliknutí na ul sa do konzoly vypísala informácia o tom.