# Получение целевого элемента при всплытии событий

Пусть у нас есть два элемента: `div` и абзац `p`, лежащий внутри этого дива:

`<div> <p></p> </div>`

Получим ссылку на наш див в переменную:

`let div = document.querySelector('div');`

Добавим нашим тегам некоторые стили:

`div { padding: 20px; border: 1px solid red; } p { width: 200px; height: 200px; border: 1px solid green; }`

Пусть теперь на див навешен обработчик клика:

`div.addEventListener('click', function() { console.log('click'); });`

Из-за того, что наш див имеет `padding`, то, когда мы кликаем на див, мы можем попасть по абзацу, а можем попасть в место, где этого абзаца нет, то есть непосредственно по диву.

При этом в обработчике клика `this` всегда будет указывать на тот элемент, на который навешан обработчик. В нашем случае это наш див:

`div.addEventListener('click', function() { console.log(this); // див });`

Однако, мы можем получить именно тот тег, в котором случилось событие. Для этого мы можем посмотреть, что лежит в `event.target`:

`div.addEventListener('click', function(event) { console.log(event.target); // или див, или абзац });`

Можно различить эти два варианта с помощью условий:

`let div = document.querySelector('div'); div.addEventListener('click', function(event) { if (event.target.tagName === 'DIV') { console.log('клик именно по диву'); } if (event.target.tagName === 'P') { console.log('клик именно по абзацу'); } });`

Можно вместо `tagName` использовать `matches`:

`let div = document.querySelector('div'); div.addEventListener('click', function(event) { if (event.target.matches('div')) { console.log('клик именно по диву'); } if (event.target.matches('p')) { console.log('клик именно по абзацу'); } });`

Даны следующие элементы:

`<div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div>` `div, ul, li { padding: 20px; } div { border: 1px solid red; } ul { border: 1px solid orange; } li { border: 1px solid green; }`

Навешайте на див обработчик клика. В этом обработчике определите, в каком из тегов сработало событие.

Модифицируйте предыдущую задачу. Сделайте так, чтобы при клике на `li`, ей в конец добавлялся восклицательный знак, а при клике на `ul` в консоль выводилась информация об этом.

← →
↑
en ru