什么是使用纯JavaScript进行事件委托的最佳方式(最快/适当)?
例如,如果我在jQuery中有这样的代码:
$('#main').on('click', '.focused', function(){
settingsPanel();
});
我该如何将它翻译成原生JavaScript?也许可以使用 .addEventListener()
。
我能想到的方法是:
document.getElementById('main').addEventListener('click', dothis);
function dothis(){
// now in jQuery
$(this).children().each(function(){
if($(this).is('.focused') settingsPanel();
});
}
但是如果#main
有很多子元素,那似乎效率不高。
那么这样做正确吗?
document.getElementById('main').addEventListener('click', doThis);
function doThis(event){
if($(event.target).is('.focused') || $(event.target).parents().is('.focused') settingsPanel();
}
event.target
开始,判断是否匹配选择器,如果匹配,则调用函数。然后向上迭代其祖先元素,并重复相同的步骤直到到达this
元素。你可以使用node.matchesSelector()
来进行测试,尽管在一些浏览器中,它是通过特定于浏览器的标志实现的,因此你需要将其包装在一个函数中或将标志方法放在Element.prototype.matchesSelector
上。 - cookie monster