如何为图标创建事件侦听器？

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

使用DOM元素的closest方法。

它将在DOM中查找您要查询的元素。 closest与querySelector的工作原理相同，因为您可以像输入选择器一样键入CSS以查找元素。

如果closest命中，它将返回该元素。如果未找到任何元素，则将返回null。

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

使用closest，您可以处理要选择的元素，而不是仅检查是否单击。

Answer 2

如果将事件处理程序添加到实际元素本身，它将起作用，并且无需检查类列表：

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!');
});