Obținerea elementului țintă la bubbling-ul evenimentelor

Să presupunem că avem două elemente: div și un paragraf p, aflat în interiorul acestui div:

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

Să obținem o referință către div-ul nostru într-o variabilă:

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

Să adăugăm câteva stiluri tag-urilor noastre:

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

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

Să presupunem că acum pe div este atașat un handler de click:

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

Datorită faptului că div-ul nostru are padding, atunci când facem click pe div, putem da peste paragraf, sau putem da în locul unde acest paragraf nu există, adică direct pe div.

În acest caz, în handler-ul de click this va indica întotdeauna către elementul pe care este atașat handler-ul. În cazul nostru acesta este div-ul nostru:

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

Cu toate acestea, putem obține exact tag-ul în care a avut loc evenimentul. Pentru aceasta putem verifica ce se află în event.target:

div.addEventListener('click', function(event) {
	console.log(event.target); // fie div-ul, fie paragraful
});

Putem distinge aceste două variante folosind condiții:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('click exact pe div');
	}
	if (event.target.tagName === 'P') {
		console.log('click exact pe paragraf');
	}
});

Putem folosi în loc de tagName matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('click exact pe div');
	}
	if (event.target.matches('p')) {
		console.log('click exact pe paragraf');
	}
});

Sunt date următoarele elemente:

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

Atașați pe div un handler de click. În acest handler determinați în care dintre tag-uri s-a declanșat evenimentul.

Modificați problema precedentă. Faceți astfel încât la click pe li, la sfârșitul acesteia să se adauge un semn de exclamare, iar la click pe ul în consolă să se afișeze informația despre aceasta.