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

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

html<div>
  <p></p>
</div>

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

javascriptlet div = document.querySelector('div');

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

cssdiv {
  padding: 20px;
  border: 1px solid red;
}

p {
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

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

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

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

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

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

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

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

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

javascriptlet 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:

javascriptlet div = document.querySelector('div');

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

html<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

cssdiv, ul, li {
  padding: 20px;
}

div {
  border: 1px solid red;
}
ul {
  border: 1px solid orange;
}
li {
  border: 1px solid green;
}