Tapahtuma-elementti Event-objektissa JavaScriptissä

Event-objekti mahdollistaa myös elementin, jossa tapahtuma tapahtui, saamisen. Tämä elementi sisältyy ominaisuuteen target. Miksi tämä on tarpeen, jos tämä elementti sisältyy this:iin?

Asia on siinä, että itse asiassa this sisältää aina elementin, johon tapahtuma oli sidottu, kun taas ominaisuus target - elementin, jota todella klikattiin. Tämä todellinen elementti voi olla sama kuin this, tai se voi olla erilainen.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on div, ja sen sisällä kappale:

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

Liitetään tapahtuma diviin, mutta klikataan kappaletta. On selvää, että napsautus kappaleeseen edustaa samanaikaisesti myös napsautusta diviin, koska kappale sisältyy diviimme.

Kuvatussa tapauksessa käy niin, että ominaisuus target sisältää lopullisen tagin, jossa tapahtuma tapahtui - eli kappaleen, eikä diviä. Varmistetaan tästä:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // tulostaa kappaleemme
	console.log(this);         // tulostaa divimme
});

Oletetaan, että sinulla on lista ul tageilla li:

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

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

Liitä ul-tagiin klikkauskäsittelijä. Tässä käsittelijässä tarkista ominaisuuden tagName avulla, mitä tagia klikattiin. Jos klikkaus tapahtui tagille li - lisää tämän tagin tekstin loppuun huutomerkki. Ja jos klikkaus tapahtui tagille ul - tulosta tieto tästä konsoliin.