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

Question

我有代码：

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

当我为类"work__icon容器"创建事件侦听器时，我的事件侦听器不起作用：

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 元素的最接近的方法。

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