Как вызывать событие при клике на дочерний элемент?

Question

[godsplane]

<div class="elem">
 <span></span>
</div>

-

document.addEventListener('click' , function(e) {
let elem = document.querySelector('.elem');
if(e.target == elem) {
alert('k')
}
})

Как при клике на span вызывать отрабывать условие на alert?

Comments

[GlazOtca]

Варианты:
1. Добавить EventListener на сам span, а не на весь документ
2. Использовать всплытие событий.

Answer 1

[alexalexes]

Если стоит цель обработать клик на конкретном элементе или на его контейнере, то повешайте обработчик на один из этих элементов, а не на весь документ, иначе замучаетесь идентифицировать target.

let elem = document.querySelector('.elem'); // Берем нужный контейнер
    elem.addEventListener('click' , function(e) // вешаем обработчик только на elem, за счет всплытия события, обработчик будет срабатывать на всех дочерних элементах
    {
      alert('k');
    });

Если уж хотите оставить обработчик на документе, то идентифицируйте target.

document.addEventListener('click' , function(e)
    {
      let elem = document.querySelector('.elem');
      if(   e.target == elem // кликнули на сам контейнер elem
         || e.target.tagName == 'SPAN' && e.target.parentNode == elem // или кликнули на какой-то элемент span, непосредственный родитель которого есть наш контейнер elem
        )
      {
        alert('k');
      }
    })

Comments

[godsplane]

Вопрос не элементарный, посколько вы его не правильно поняли судя по всему.
Понятное дело что я могу написать querySelector('.elem span')
Но это будет работать только для одного спана.
Я могу решить это задачу задав еще одну переменную , но я хочу знать как правильно решить эту задачу.
Чтобы у меня таргет так же ловил все элементы внутри таргента.

[godsplane]

То есть мне нужно чтобы клик работал и на .elem и на span одновременно.

[alexalexes]

Изменил ответ.

Answer 2

[obemgcabazn]

document.addEventListener('click' , function(e) {
  let elem = document.querySelector('.elem span');
  if(e.target == elem) {
    alert('k')
  }
})