Question

有人告诉我有时事件代表更有效率。

<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下实现委托函数的工作。

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的事件冒泡，直到找到与指定选择器匹配的元素。

什么是jquery事件委托的背后？

1 个答案: