本机JS等效于jQuery委托
本机JS等效于jQuery委托
提问于 2014-08-11 16:44:33
动态创建的dom元素上的事件委托的本机实现是什么？
我试着查看jQuery源代码，但无法遵循.on方法。
注意:目前，我在dom元素创建后附加事件处理程序，这似乎非常标准，但我喜欢jQuery .on使用这个语法$( document ).on( "click", ".selector", handler );处理动态创建的元素事件的方式。
回答 6
Stack Overflow用户
回答已采纳
发布于 2014-08-11 16:58:02
所发生的基本情况是：
// $(document).on("click", <selector>, handler)
document.addEventListener("click", function(e) {
for (var target=e.target; target && target!=this; target=target.parentNode) {
// loop parent nodes from the target to the delegation node
if (target.matches(<selector>)) {
handler.call(target, e);
break;
}
}
}, false);但是，当调用e.currentTarget时，handler是document，而e.stop[Immediate]Propagation()将以不同的方式工作。jQuery对此进行了大量抽象(包括调用顺序)。
我使用了 method，它还不是标准的，但在现代浏览器中已经可以使用不同的名称。您可以使用自定义谓词来测试元素，而不是选择器。而且addEventListener显然不兼容老一套。
Stack Overflow用户
发布于 2017-10-05 22:31:27
这应该会在常规HTML元素上为您完成：
HTMLElement.prototype.on = function(event, selector, handler) {
this.addEventListener(event, function(e) {
let target = e.target;
if (typeof(selector) === 'string') {
while (!target.matches(selector) && target !== this) {
target = target.parentElement;
}
if (target.matches(selector))
handler.call(target, e);
} else {
selector.call(this, e);
}
});
};Stack Overflow用户
发布于 2019-01-12 07:17:19
即使不迭代事件目标的所有祖先，也可以实现事件委托。
$(document).on("click", selector, handler);可以用NativeJS编写如下：
document.addEventListener("click", event => {
var el = document.querySelector(selector);
if (el && el.contains(event.target)) {
handler.call(el, event);
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25248286
复制相关文章
相似问题
腾讯云开发者
