Как создать слушателей событий для иконок?

Question

у меня есть код:

<a  class="work__icon-container"><i class="fas fa-search work__img-icon"></i></a>

Когда я создаю прослушиватель событий для класса "work__icon-container", мой прослушиватель событий не работает:

document.addEventListener('click',function(event){
 if (event.target.classList.contains('work__icon-container')){
  console.log('works!')
 }
})

Конечно, я обнаружил, что когда я нажимаю на значок, я получаю:

 <i class="fas fa-search work__img-icon"></i>

или:

<path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>

Как создать прослушиватель событий для всех элементов class = "work__icon-container«

Answer 1

Если бы вы добавили обработчик событий к самому фактическому элементу, он бы работал, и нет необходимости проверять список классов:

document.querySelector('a.work__icon-container').addEventListener('click', ...

Конечно, возможно, есть причина, по которой вы хотитеприкрепить слушателя выше. В этом случае недостаточно проверить список классов цели, поскольку цель, по которой вы щелкаете, может находиться внутри того, что вы хотите. Вместо этого посмотрите, соответствует ли он селектору или потомку этого селектора.

document.addEventListener('click', (e) => {
  if (!e.target.matches('.work__icon-container, .work__icon-container *')) {
    return;
  }
  console.log('It works!');
});

Answer 2

Используйте ближайший метод элемента DOM.

Он будет обрабатывать DOM в поисках запрашиваемого вами элемента. closest работает так же, как querySelector, так как вы можете вводить CSS как селекторы для поиска элементов.

Если у closest есть попадание, он возвращает элемент. Если элемент не найден, он вернет ноль.

document.addEventListener('click',function(event){
  const workContainer = event.target.closest('.work__icon-container');
  if (workContainer !== null {
    console.log(workContainer);
  }
});

С помощью closest вы можете работать с элементом, который вы пытаетесь выбрать, вместо того, чтобы проверять, нажали ли вы на него.