Gebeurtenis Element in die Event Voorwerp in JavaScript

Die Event voorwerp laat ook toe om die element te verkry waarin die gebeurtenis plaasgevind het. Hierdie element word in die eienskap target bevat. Waarom is dit nodig, aangesien hierdie element in this vervat is?

Die saak is dat this altyd die element bevat waaraan die gebeurtenis gekoppel was, terwyl die eienskap target die element bevat waarop regtig geklik is. Hierdie werklike element kan met this ooreenstem, of dit mag nie ooreenstem nie.

Kom ons kyk na 'n voorbeeld. Laat ons aanneem ons het 'n div, en binne dit 'n paragraaf:

html<div id="elem">
  <p>teks</p>
</div>

Laat ons 'n gebeurtenis aan die div koppel, maar klik op die paragraaf. Dit is duidelik dat 'n klik op die paragraaf terselfdertyd ook 'n klik op die div is, aangesien die paragraaf in ons div vervat is.

In die beskrywe geval sal die eienskap target die finale tag bevat, waarin die gebeurtenis plaasgevind het - dit wil sê die paragraaf, en nie die div nie. Kom ons verifieer dit:

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

elem.addEventListener('click', function(event) {
  console.log(event.target); // sal ons paragraaf uitvoer
  console.log(this);         // sal ons div uitvoer
});

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

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