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:

html<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ä:

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

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

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

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