嵌套元素的事件委托

在document中全局监听事件，能够提升性能，例如

// Listen for clicks on the entire window
document.addEventListener('click', function (event) {

    // Ignore elements without the .click-me class
    if (!event.target.matches('.click-me')) return;
    
    // Run your code...

})

在 document 上设置监听器，这样页面的所有元素的点击事件，都能触发该监听器。尤其是，一些动态注入的元素来说，这节省了动态增删监听器的工作量。

这里有一个问题，当你的元素存在嵌套时，例如

<button class="click-me">
    <svg aria-label="thumbsup">...</svg>
    喜欢
</button>

这时，点击喜欢，能够正常运行点击处理函数。但是，点击svg时，event.target.matches 会返回 false, 因此无法执行后续逻辑。

解决办法就是用 Element.closest() 方法替代。这个方法匹配特定选择器，返回离当前元素最近的祖先元素（也可以是当前元素本身）。如果匹配不到，则返回 null。

// Listen for clicks on the entire window
document.addEventListener('click', function (event) {

    // Ignore elements without the .click-me class
    if (!event.target.closest('.click-me')) return;
    
    // Run your code...

});

这样，事件监听就能够正常工作了。