Obtención del elemento objetivo durante la propagación de eventos

Supongamos que tenemos dos elementos: div y un párrafo p, ubicado dentro de este div:

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

Obtengamos una referencia a nuestro div en una variable:

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

Agreguemos algunos estilos a nuestras etiquetas:

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

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

Ahora, supongamos que hay un manejador de clics asignado al div:

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

Debido a que nuestro div tiene padding, cuando hacemos clic en el div, podemos hacer clic en el párrafo, o podemos hacer clic en un lugar donde no está el párrafo, es decir, directamente en el div.

En este caso, en el manejador de clics this siempre apuntará al elemento al que está asignado el manejador. En nuestro caso este es nuestro div:

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

Sin embargo, podemos obtener exactamente la etiqueta donde ocurrió el evento. Para esto podemos ver qué hay en event.target:

div.addEventListener('click', function(event) {
	console.log(event.target); // o el div, o el párrafo
});

Podemos distinguir estas dos opciones usando condiciones:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('clic exactamente en el div');
	}
	if (event.target.tagName === 'P') {
		console.log('clic exactamente en el párrafo');
	}
});

En lugar de tagName se puede usar matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('clic exactamente en el div');
	}
	if (event.target.matches('p')) {
		console.log('clic exactamente en el párrafo');
	}
});

Se dan los siguientes elementos:

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

Asigne al div un manejador de clics. En este manejador, determine en cuál de las etiquetas se activó el evento.

Modifique la tarea anterior. Haga que al hacer clic en li, se le agregue al final un signo de exclamación, y al hacer clic en ul se muestre información sobre esto en la consola.