0

有人告诉我有时事件委托更有效率。

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

4

1 回答 1

3

在这段代码中：

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

于 2013-04-02T15:43:34.677 回答