当前和未来元素的事件侦听器，无需 jQuery [重复]

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

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

我编写了一个更通用的函数，它接受一个选择器、事件类型和一个处理函数，类似于 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.