动态创建 dom 元素的事件委托有哪些本地实现?
我尝试查看 jQuery 源代码,但是我无法理解 .on
方法。
注意:目前我在创建 dom 元素后附加事件处理程序,这似乎很标准,但我喜欢 jQuery 用以下语法处理动态创建元素事件的方式:$( document ).on( "click", ".selector", handler );
。
动态创建 dom 元素的事件委托有哪些本地实现?
我尝试查看 jQuery 源代码,但是我无法理解 .on
方法。
注意:目前我在创建 dom 元素后附加事件处理程序,这似乎很标准,但我喜欢 jQuery 用以下语法处理动态创建元素事件的方式:$( document ).on( "click", ".selector", handler );
。
基本上会发生的事情是这样的:
// $(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
是 document
,e.stop[Immediate]Propagation()
的行为也会有所不同。jQuery 对此进行了很多抽象(包括调用顺序)。.matches()
方法,它尚未成为标准,但在现代浏览器中已经以不同的名称提供。您可以使用自定义谓词来测试元素,而不是选择器。而且,addEventListener
明显不兼容旧版IE。handler
的不是 <li>
元素,而是你已经附加到 <ul>
元素上的监听器 - 列表中的任何事件都会冒泡到该元素。 - Bergi对于普通的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);
}
});
};
on
在以后被标准化会发生什么就好了。 - mikemaccana$(document).on("click", selector, handler);
可以使用原生JS编写为:
document.addEventListener("click", event => {
var el = document.querySelector(selector);
if (el && el.contains(event.target)) {
handler.call(el, event);
}
});
selector
返回多个节点,例如类选择器,则此方法无法正常工作。 - Stephen Blairdocument.querySelectorAll(selector).forEach
。 - Vaibhav Nigam不要使用这个 JQuery
$(document).on('click', '.your-selector', function() {
// do something
});
我经常在纯JavaScript中使用这个。
document.addEventListener('click', function(e) {
// e.target can be a sub element of the one we want
const el = e.target ? e.target.closest('.your-selector') : null;
if (el) {
// do something
}
});
提示:在JavaScript中,“closest”包括元素本身在第一位,然后开始向上遍历DOM。
我想进行一些编程挑战;)
108字节(基于@Bergi)
(e,d,g,h,b)=>e.addEventListener(d,c=>{for(d=e,b=c.target;b!=d;)b.matches(g)?h.call(d=b,c,b):b=b.parentNode})
工作演示:
window.$on = (e,d,g,h,b)=>e.addEventListener(d,c=>{for(d=e,b=c.target;b!=d;)b.matches(g)?h.call(d=b,c,b):b=b.parentNode})
$on(document.body, 'click', '.clickable', (evt, matched) => {
console.log(matched)
})
<div class="wrapper">
<div class="not-clickable rect">
not clickable
</div>
<div class="clickable rect">
clickable
</div>
<div class="clickable rect">
clickable
<div class="child">child element</div>
</div>
</div>
<style>
.rect {
width: 100px;
height: 100px;
background: red;
border: 1px solid;
margin: 10px;
float: left;
}
.child {
background: gray;
}
</style>
document.addEventListener("click", function (event) {
if (event.target.classList.contains("yourClass1")) {
//do something
}
if (event.target.classList.contains("yourclass2")) {
//do something
}
if (event.target.id == "yourId") {
//do something
}
});
<ul>
<li>
item 1
<button class="btn-edit"><i class="fas fa-pencil"></i></button>
</li>
<li>
item 3
<button class="btn-edit"><i class="fas fa-pencil"></i></button>
</li>
<li>
item 3
<button class="btn-edit"><i class="fas fa-pencil"></i></button>
</li>
</ul>
function delegateClick(selector, callback){
let selectorItems = document.querySelectorAll(selector);
document.addEventListener('click', function(e){
let clickedItems = e.path;
for(let clickedItem of clickedItems){
for(let selectorItem of selectorItems){
if(clickedItem === selectorItem){
callback(clickedItem);
}
}
}
});
}
这提供了与jquery非常相似的用法。
delegateClick('.btn-edit', (elm) => {
//access the clicked DOM element
elm;
});