Élément d'événement dans l'objet Event en JavaScript

L'objet Event permet également d'obtenir l'élément dans lequel l'événement s'est produit. Cet élément est contenu dans la propriété target. Pourquoi est-ce nécessaire, si cet élément est contenu dans this ?

Le fait est que this contient toujours l'élément, auquel l'événement était attaché, tandis que la propriété target - l'élément sur lequel le clic a réellement eu lieu. Cet élément réel peut coïncider avec this, ou peut ne pas coïncider.

Regardons un exemple. Disons que nous avons une div, et à l'intérieur un paragraphe :

<div id="elem">
	<p>text</p>
</div>

Attachons un événement au div, mais cliquons sur le paragraphe. Évidemment, le clic sur le paragraphe représente simultanément un clic sur le div, car le paragraphe est contenu dans notre div.

Dans le cas décrit, la propriété target contiendra la balise finale, dans laquelle l'événement s'est produit - c'est-à-dire le paragraphe, et non le div. Assurons-nous en :

let elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
	console.log(event.target); // affichera notre paragraphe
	console.log(this);         // affichera notre div
});

Disons que vous avez une liste ul avec des balises li :

ul {
	padding: 30px;
	border: 1px solid red;
}
li {
	list-style-type: none;
	margin-bottom: 20px;
	border: 1px dashed black;
}

<ul id="elem">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Attachez à la balise ul un gestionnaire de clic. Dans ce gestionnaire, vérifiez à l'aide de la propriété tagName, sur quelle balise le clic a eu lieu. Si le clic était sur la balise li - ajoutez à la fin du texte de cette balise un point d'exclamation. Et si le clic était sur la balise ul - affichez l'information à ce sujet dans la console.