მოვლენის ელემენტი Event-ის ობიექტში JavaScript-ში

Event ობიექტი ასევე საშუალებას გვაძლევს მივიღოთ ელემენტი, რომელშიც მოხდა მოვლენა. ეს ელემენტი შეიცავს თვისებაში target. რატომ არის ეს საჭირო, თუ ეს ელემენტი შეიცავს this-ში?

საქმე ისაა, რომ this ყოველთვის შეიცავს ელემენტს, რომელსაც მოვლენა იყო მიბმული, ხოლო თვისება target - ელემენტი, რომელზეც რეალურად მოხდა დაწკაპუნება. ეს რეალური ელემენტი შეიძლება ემთხვეოდეს this-ს, ან შეიძლება არ ემთხვეოდეს.

მოდით შევხედოთ მაგალითს. მოდით გვაქვს div, ხოლო მის შიგნით აბზაცი:

html<div id="elem">
  <p>ტექსტი</p>
</div>

მივაბათ მოვლენა div-ს, მაგრამ დავაწკაპუნოთ აბზაცზე. ცხადია, რომ დაწკაპუნება აბზაცზე წარმოადგენს ერთდროულად დაწკაპუნებას div-ზეც, რადგან აბზაცი შეიცავს ჩვენს div-ში.

აღწერილ შემთხვევაში გამოვა, რომ თვისება target შეიცავს საბოლოო ტეგს, რომელშიც მოხდა მოვლენა - ანუ აბზაცს, და არა div-ს. დავრწმუნდეთ ამაში:

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

elem.addEventListener('click', function(event) {
  console.log(event.target); // გამოიტანს ჩვენს აბზაცს
  console.log(this);         // გამოიტანს ჩვენს div-ს
});

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

html<ul id="elem">
  <li>ტექსტი</li>
  <li>ტექსტი</li>
  <li>ტექსტი</li>
  <li>ტექსტი</li>
  <li>ტექსტი</li>
</ul>