javascript - jquery 事件委托(delegate)背后是什么？

Question

有人告诉我有时事件委托(delegate)效率更高。

<ul id="test">
    <li>aaaaa<li>
    <li>bbbbb <p>xxxxx<p> </li>
    <li>ccccc<li>
</ul>

//script
var li = document.getElementByTagName('li');
for(var i=0,len=li.length;i<len;i++){
    li[i].addEventListener('click',function(){ alert(this.innerHTML); },false);
}

//event delegate
var ul = document.getElementById('test');
ul.addEventListener('click',function(e){
    if(e.target == 'li'){
        alert(e.target.innerHTML);
    }
},false);

点击“li”中的“p”时效果不佳。我知道jquery有'on'方法，它很有用。我尝试阅读jquery源代码，但无法理解如何在复杂的DOM下实现委托(delegate)函数。

Answer 1

在此代码中:

//event delegate
var ul = document.getElementById('test');
ul.addEventListener('click',function(e){
    if(e.target == 'li'){
        alert(e.target.innerHTML);
    }
},false);

对于 <ul> 中任何地方的任何点击，都会调用(单个)事件处理程序。元素。

如果您想查找哪个 <li>收到点击后，即使点击实际上是在某个子元素中，您也需要爬 DOM 树，直到找到所需的元素。

//event delegate
var ul = document.getElementById('test');
ul.addEventListener('click',function(e) {
    var el = e.target;
    while (el) {
        if (el.tagName === 'li') {
            alert(el.innerHTML);
            break;
        } else {
            el = el.parentNode;      // climb the tree
            if (el === this) break;  // but not too far!
        }
    }
}, false);

jQuery的第二个参数.on为您执行 DOM 爬升 - 它模拟 DOM 的事件冒泡，直到找到与指定选择器匹配的元素。