Pridobivanje ciljnega elementa pri bubblingu dogodkov

Recimo, da imamo dva elementa: div in odstavek p, ki leži znotraj tega div:

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

Pridobimo referenco na naš div v spremenljivko:

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

Dodajmo našim oznakam nekaj stilov:

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

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

Recimo, da je na div dodan ročevalec klika:

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

Ker ima naš div padding, lahko, ko kliknemo na div, zadeli odstavek, ali pa lahko zadenemo mesto, kjer tega odstavka ni, torej neposredno na div.

V tem primeru bo this v ročevalcu klika vedno kazal na element, na katerega je dodan ročevalec. V našem primeru je to naš div:

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

Vendar lahko dobimo točno tisto oznako, v kateri se je zgodil dogodek. Za to lahko pogledamo, kaj je v event.target:

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

Ti dve možnosti lahko razlikujemo s pomočjo pogojev:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('klik točno na div');
	}
	if (event.target.tagName === 'P') {
		console.log('klik točno na odstavek');
	}
});

Namesto tagName lahko uporabimo matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('klik točno na div');
	}
	if (event.target.matches('p')) {
		console.log('klik točno na odstavek');
	}
});

Podani so naslednji elementi:

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

Dodajte na div ročevalec klika. V tem ročevalcu določite, v kateri od oznak se je sprožil dogodek.

Spremenite prejšnjo nalogo. Naredite tako, da se ob kliku na li, na konec doda klicaj, ob kliku pa na ul se v konzolo izpiše informacija o tem.