没有jQuery的当前和未来元素的事件监听器

时间:2015-11-24 15:54:37

标签: javascript javascript-events web-standards

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

任何人都知道这个方法叫什么?

2 个答案:

答案 0 :(得分:3)

您要查找的方法称为事件捕获。你可以这样做:

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

答案 1 :(得分:3)

我写了一个更通用的函数,它接受一个选择器,事件类型和一个处理函数,类似于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){
                if (target.matches(selector)){
                    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)也适用于这些浏览器。

另请参阅我对Adding event listeners to multiple elements的回答,它将事件监听器添加到元素本身而不是body