Ottenere l'elemento target durante il bubbling degli eventi

Supponiamo di avere due elementi: div e un paragrafo p, situato all'interno di questo div:

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

Otteniamo un riferimento al nostro div in una variabile:

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

Aggiungiamo alcuni stili ai nostri tag:

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

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

Supponiamo ora che sul div sia associato un gestore di click:

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

Poiché il nostro div ha padding, quando clicchiamo sul div, possiamo cliccare sul paragrafo, oppure possiamo cliccare in un'area dove il paragrafo non è presente, cioè direttamente sul div.

In questo caso, nel gestore del click this indicherà sempre l'elemento a cui è associato il gestore. Nel nostro caso è il nostro div:

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

Tuttavia, possiamo ottenere esattamente il tag in cui si è verificato l'evento. Per fare questo possiamo controllare cosa c'è in event.target:

div.addEventListener('click', function(event) {
	console.log(event.target); // o il div, o il paragrafo
});

È possibile distinguere queste due opzioni utilizzando delle condizioni:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('click proprio sul div');
	}
	if (event.target.tagName === 'P') {
		console.log('click proprio sul paragrafo');
	}
});

Invece di tagName si può usare matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('click proprio sul div');
	}
	if (event.target.matches('p')) {
		console.log('click proprio sul paragrafo');
	}
});

Sono dati i seguenti 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;
}

Associate al div un gestore di click. In questo gestore determinate in quale dei tag si è verificato l'evento.

Modificate il problema precedente. Fate in modo che quando si clicca su li, venga aggiunto un punto esclamativo alla sua fine, e quando si clicca su ul vengano stampate in console le informazioni a riguardo.