Question

动态创建的dom元素上的事件委派的本机实现是什么？

我试着查看jquery源代码，但我不能遵循.on方法。

注意：目前我在创建dom元素后附加了事件处理程序，这似乎很标准但我喜欢jquery .on使用这种语法处理动态创建的元素事件的方式$（document）.on（＆＃34; click＆＃34;，＆＃34; .selector＆＃34;，handler）;

Answer 1

基本上是这样的：

// $(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为handler，e.stop[Immediate]Propagation()的工作方式不同。 jQuery对此进行了抽象（包括调用顺序）。

我使用的是.matches() method，它尚未标准，但在现代浏览器中已经以不同的名称提供。您可以使用自定义谓词来测试元素而不是选择器。并且addEventListener显然不是旧的兼容。

Answer 2

这应该在常规HTML元素上为您完成：

document.getElementById('parent').getElementsByTagName('a')

Answer 3

即使不遍历事件目标的所有祖先，也可以实现事件委托。

$(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);
  }
});

Answer 4

例如，我们有一个这样的html结构。

<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>

请注意，按钮内有一个i标记。

如果要为Click事件捕获恰好合适的项目，则需要以下功能。

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;       

});

Answer 5

感觉像打高尔夫球一样；）

108个字节（基于 @Bergi ）

value     count
[0,  10)  600
[10, 20)  3600
[20, 30)  6600

工作演示：

(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)
})

原生JS相当于jquery委托

5 个答案: