Das Ereigniselement im Event-Objekt in JavaScript

Das Objekt Event ermöglicht es auch, das Element zu erhalten, in dem das Ereignis stattgefunden hat. Dieses Element ist in der Eigenschaft target enthalten. Warum ist das notwendig, wenn dieses Element in this enthalten ist?

Die Sache ist die, dass this tatsächlich immer das Element enthält, an das das Ereignis gebunden wurde, während die Eigenschaft target das Element enthält, auf das tatsächlich geklickt wurde. Dieses tatsächliche Element kann mit this übereinstimmen, oder auch nicht.

Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben einen div und darin einen Absatz:

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

Binden wir ein Ereignis an den div, klicken aber auf den Absatz. Offensichtlich stellt der Klick auf den Absatz gleichzeitig einen Klick auf den div dar, da der Absatz in unserem div enthalten ist.

Im beschriebenen Fall wird sich herausstellen, dass die Eigenschaft target das End-Tag enthalten wird, in dem das Ereignis stattfand - also den Absatz, und nicht den div. Überzeugen wir uns davon:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // gibt unseren Absatz aus
	console.log(this);         // gibt unseren div aus
});

Nehmen wir an, Sie haben eine Liste ul mit li-Tags:

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>

Binden Sie einen Klick-Handler an das ul-Tag. Prüfen Sie in diesem Handler mithilfe der Eigenschaft tagName, auf welches Tag geklickt wurde. Wenn der Klick auf ein li-Tag erfolgte - fügen Sie am Ende des Textes dieses Tags ein Ausrufezeichen hinzu. Wenn der Klick auf das ul-Tag erfolgte - geben Sie Informationen dazu in der Konsole aus.