Получаване на целевия елемент при излитане на събития

Нека имаме два елемента: div и параграф p, намиращ се вътре в този div:

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

Нека получим референция към нашия div в променлива:

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

Нека добавим някои стилове към нашите тагове:

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

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

Нека сега към div е добавен обработчик за кликване:

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

Поради това, че нашият div има padding, когато кликнем върху div, може да попаднем върху параграфа, или може да попаднем на място, където този параграф няма, тоест директно върху div.

При това в обработчика за клик this винаги ще сочи към елемента, на който е добавен обработчика. В нашия случай това е нашият div:

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

Обаче, можем да получим точно онзи таг, в който се е случило събитието. За това можем да проверим какво се съдържа в event.target:

javascriptdiv.addEventListener('click', function(event) {
  console.log(event.target); // или div, или параграф
});

Можем да разграничим тези два варианта с помощта на условия:

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

div.addEventListener('click', function(event) {
  if (event.target.tagName === 'DIV') {
    console.log('кликване точно върху div');
  }
  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('кликване точно върху div');
  }
  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;
}