Obtention de l'élément cible lors du bouillonnement des événements

Supposons que nous ayons deux éléments : un div et un paragraphe p, se trouvant à l'intérieur de ce div :

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

Obtenons une référence vers notre div dans une variable :

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

Ajoutons quelques styles à nos balises :

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

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

Supposons maintenant qu'un gestionnaire de clic soit attaché au div :

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

Parce que notre div a un padding, lorsque nous cliquons sur le div, nous pouvons cliquer sur le paragraphe, ou nous pouvons cliquer à un endroit où il n'y a pas de paragraphe, c'est-à-dire directement sur le div.

Dans ce cas, dans le gestionnaire de clic, this pointera toujours vers l'élément sur lequel le gestionnaire est attaché. Dans notre cas, c'est notre div :

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

Cependant, nous pouvons obtenir exactement la balise dans laquelle l'événement s'est produit. Pour cela, nous pouvons regarder ce qui se trouve dans event.target :

div.addEventListener('click', function(event) {
	console.log(event.target); // soit le div, soit le paragraphe
});

Il est possible de distinguer ces deux cas à l'aide de conditions :

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('clic directement sur le div');
	}
	if (event.target.tagName === 'P') {
		console.log('clic directement sur le paragraphe');
	}
});

Au lieu de tagName, on peut utiliser matches :

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('clic directement sur le div');
	}
	if (event.target.matches('p')) {
		console.log('clic directement sur le paragraphe');
	}
});

Les éléments suivants sont donnés :

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

Attachez un gestionnaire de clic au div. Dans ce gestionnaire, déterminez dans laquelle des balises l'événement s'est déclenché.

Modifiez la tâche précédente. Faites en sorte que lors d'un clic sur un li, un point d'exclamation soit ajouté à sa fin, et lors d'un clic sur ul, des informations soient affichées dans la console à ce sujet.