Az esemény eleme az Event objektumban JavaScriptben

Az Event objektum lehetővé teszi annak az elemnek a megszerzését is, amiben az esemény bekövetkezett. Ez az elem a target tulajdonságban található. Miért van erre szükség, ha ez az elem a this-ben is megtalálható?

Az igazság az, hogy a this mindig azt az elemet tartalmazza, amelyhez az esemény hozzá volt kötve, míg a target tulajdonság - azt az elemet, amelyre ténylegesen kattintottak. Ez a tényleges elem egybeeshet a this-vel, de nem is feltétlenül.

Nézzünk egy példát. Tegyük fel, hogy van egy div-ünk, és benne egy bekezdés:

<div id="elem">
	<p>szöveg</p>
</div>

Kössünk eseményt a div-hez, de kattintsunk a bekezdésre. Nyilvánvaló, hogy a bekezdésre kattintás egyben a div-re kattintást is jelent, mivel a bekezdés a div-ünkben található.

A leírt esetben kiderül, hogy a target tulajdonság a végső tag-et fogja tartalmazni, amiben az esemény bekövetkezett - vagyis a bekezdést, és nem a div-et. Győződjünk meg erről:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // kiírja a bekezdésünket
	console.log(this);         // kiírja a div-ünket
});

Tegyük fel, hogy van egy ul listája li tag-ekkel:

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

<ul id="elem">
	<li>szöveg</li>
	<li>szöveg</li>
	<li>szöveg</li>
	<li>szöveg</li>
	<li>szöveg</li>
</ul>

Kössön egy kattintáskezelőt a ul tag-hez. Ebben a kezelőben ellenőrizze a tagName tulajdonság segítségével, hogy melyik tag-re kattintottak. Ha a kattintás egy li tag-en volt - adjon hozzá egy felkiáltójelet a tag szövegéhez. Ha viszont a kattintás a ul tag-en volt - írja ki erről az információt a konzolra.