Элемент падзеі ў аб'екце Event у JavaScript

Аб'ект Event таксама дазваляе атрымаць элемент, у якім адбылася падзея. Гэты элемент змяшчаецца ў уласцівасці target. Навошта гэта трэба, калі гэты элемент змяшчаецца ў this?

Справа ў тым, што на самой справе this заўсёды змяшчае элемент, да якога было прывязана падзея, а ўласцівасць target - элемент, па якім рэальна быў клік. Гэты рэальны элемент можа супадаць з this, а можа не супадаць.

Давайце паглядзім на прыкладзе. Хай у нас ёсць div, а ўнутры яго абзац:

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

Прывязам падзею да дыву, але клікнем па абзацу. Відавоўчна, што клік па абзацу ўяўляе сабой адначасова і клік па дыве, так як абзац змяшчаецца ў нашым дыве.

У апісаным выпадку атрымаецца, што ўласцівасць target будзе змяшчаць канчатковы тэг, у якім здарылася падзея - гэта значыць абзац, а не дыў. Пераканаемся ў гэтым:

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

elem.addEventListener('click', function(event) {
  console.log(event.target); // вывядзе наш абзац
  console.log(this);         // вывядзе наш дыў
});

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

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