# Элемент события в объекте Event в JavaScript

Объект `Event` также позволяет получить элемент, в котором произошло событие. Этот элемент содержится в свойстве `target`. Зачем это нужно, если этот элемент содержится в `this`?

Дело в том, что на самом деле `this` всегда содержит элемент, к которому было привязано событие, а свойство `target` - элемент, по которому реально был клик. Этот реальный элемент может совпадать с `this`, а может не совпадать.

Давайте посмотрим на примере. Пусть у нас есть `div`, а внутри него абзац:

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

Привяжем событие к диву, но кликнем по абзацу. Очевидно, что клик по абзацу представляет собой одновременно и клик по диву, так как абзац содержится в нашем диве.

В описанном случае получится, что свойство `target` будет содержать конечный тег, в котором случилось событие - то есть абзац, а не див. Убедимся в этом:

`let elem = document.querySelector('#elem'); elem.addEventListener('click', function(event) { console.log(event.target); // выведет наш абзац console.log(this); // выведет наш див });`

Пусть у вас есть список `ul` с тегами `li`:

`ul { padding: 30px; border: 1px solid red; } li { list-style-type: none; margin-bottom: 20px; border: 1px dashed black; }` `<ul id="elem"> <li>text</li> <li>text</li> <li>text</li> <li>text</li> <li>text</li> </ul>`

:

Привяжите к тегу `ul` обработчик клика. В этом обработчике проверяйте с помощью свойства `tagName`, по какому тегу был клик. Если клик был по тегу `li` - добавьте в конец текста этого тега восклицательный знак. А если клик был по тегу `ul` - выведите информацию об этом в консоль.

←→
↑
en ru