Dobijanje ciljnog elementa pri propagaciji događaja

Neka postoje dva elementa: div i pasus p, koji se nalazi unutar tog div-a:

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

Dobijmo referencu na naš div u promenljivu:

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

Dodajmo neke stilove našim tagovima:

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

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

Neka je sada na div postavljen rukovalac klika:

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

Zbog toga što naš div ima padding, kada kliknemo na div, možemo pogoditi pasus, ali možemo pogoditi i mesto gde pasusa nema, odnosno direktno na div.

Pri tome će u rukiovaocu klika this uvek pokazivati na onaj element na koji je rukovalac postavljen. U našem slučaju to je naš div:

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

Međutim, možemo dobiti upravo onaj tag u kom se događaj desio. Za ovo možemo proveriti šta se nalazi u event.target:

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

Ova dva slučaja se mogu razlikovati pomoću uslova:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('klik baš po div-u');
	}
	if (event.target.tagName === 'P') {
		console.log('klik baš po pasusu');
	}
});

Umesto tagName može se koristiti matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('klik baš po div-u');
	}
	if (event.target.matches('p')) {
		console.log('klik baš po pasusu');
	}
});

Data su sledeći 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;
}

Postavite na div rukovaoc klika. U ovom rukoviocu odredite u kojem od tagova se događaj desio.

Modifikujte prethodni zadatak. Uredite tako da pri kliku na li, na njen kraj doda uzvičnik, a pri kliku na ul u konzolu se ispiše informacija o tome.