没有jQuery的当前和将来元素的事件侦听器

Question

如果我没记错的话，我曾经看到一种将事件侦听器绑定到与特定条件匹配的每个元素的方法，也许是查询选择器。再次寻找它，除了人们高度依赖jQuery之外，我找不到其他任何东西，但是我更喜欢一种真正简单的方法来实现这一点。

有人知道这个方法叫什么吗？

Answer 1

您正在寻找的方法称为事件捕获。你可以这样做：

document.querySelector('body').addEventListener('click', function(evt) {
    // Do some check on target
    if ( evt.target.classList.contains('some-class') ) {
        // DO CODE
    }
}, true); // Use Capturing

Answer 2

我写了一个更通用的函数，它具有选择器，事件类型和处理程序函数，类似于jQuery的on函数：

/** adds a live event handler akin to jQuery's on() */
function addLiveEventListeners(selector, event, handler){
    document.querySelector("body").addEventListener(
         event
        ,function(evt){
            var target = evt.target;
            while (target != null){
                var isMatch = target.matches(selector);
                if (isMatch){
                    handler(evt);
                    return;
                }
                target = target.parentElement;
            }
        }
        ,true
    );
}

例如，对div的任何点击都将调用以下内容，即使该点击稍后添加到DOM中也是如此：

addLiveEventListeners("div", "click", function(evt){ console.log(evt); });

这适用于所有现代浏览器和Microsoft Edge。为了使其能够在IE9-IE11中工作，target.matches(selector)应按以下方式修改测试：

var isMatch = target.matches ? target.matches(selector) : target.msMatchesSelector(selector);

然后该测试if (isMatch)也适用于这些浏览器。

另请参阅我关于将事件侦听器添加到多个元素的答案，这将事件侦听器添加到元素本身而不是body。