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