Obtendo o elemento alvo durante a propagação de eventos

Suponha que temos dois elementos: uma div e um parágrafo p, localizado dentro dessa div:

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

Vamos obter uma referência para nossa div em uma variável:

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

Vamos adicionar alguns estilos às nossas tags:

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

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

Agora, vamos supor que um manipulador de clique esteja anexado à div:

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

Como nossa div tem padding, quando clicamos na div, podemos acertar o parágrafo, ou podemos acertar um local onde o parágrafo não está, ou seja, diretamente na div.

Neste caso, no manipulador de clique, this sempre apontará para o elemento ao qual o manipulador está anexado. No nosso caso, é a nossa div:

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

No entanto, podemos obter exatamente a tag onde o evento ocorreu. Para isso, podemos verificar o que está em event.target:

div.addEventListener('click', function(event) {
	console.log(event.target); // ou a div, ou o parágrafo
});

Podemos distinguir essas duas opções usando condicionais:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('clique exatamente na div');
	}
	if (event.target.tagName === 'P') {
		console.log('clique exatamente no parágrafo');
	}
});

Em vez de tagName, podemos usar matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('clique exatamente na div');
	}
	if (event.target.matches('p')) {
		console.log('clique exatamente no parágrafo');
	}
});

Os seguintes elementos são fornecidos:

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

Anexe um manipulador de clique à div. Neste manipulador, determine em qual das tags o evento foi acionado.

Modifique a tarefa anterior. Faça com que ao clicar em um li, um ponto de exclamação seja adicionado ao seu final, e ao clicar na ul, informações sobre isso sejam exibidas no console.