Javascript 什么'；jquery事件委托的背后是谁？

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

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

aaaaa

bbbbbxxxxx
ccccc


//剧本
var li=document.getElementByTagName（'li'）；
对于（var i=0，len=li.length；i在本代码中：

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

对于
元素中的任何位置的任何单击，都将调用（单个）事件处理程序

如果您希望找到哪个
收到了单击，即使单击实际上在某个子元素中，您也需要爬升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的事件冒泡，直到找到与指定选择器匹配的元素。
在此代码中：

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

对于
元素中的任何位置的任何单击，都将调用（单个）事件处理程序

如果您希望找到哪个
收到了单击，即使单击实际上在某个子元素中，您也需要爬升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的事件冒泡，直到找到与指定选择器匹配的元素。
@DOM这不是问题所在。OP想基于

上的jquerys

编写自己的委托函数。p不起作用的原因是p不是您要测试的li。只需确保目标是您要将事件委派给的元素的子元素，或者是元素本身。您可以尝试编写更有效的事件委派函数，或者尝试优化元素选择器。这取决于情况，但在这种情况下，我会将和id应用于
 。您需要在父对象之间循环，直到找到与您的委派匹配的对象，并在匹配您执行的元素时停止循环。
addEventListener
@Dom这不是问题所在。OP希望基于

上的jquerys

编写自己的委派函数。p不起作用的原因是p不是您正在测试的li例如。只需确保目标是要将事件委派给的元素的子元素或元素本身。您可以尝试编写更高效的事件委派函数，也可以尝试优化元素选择器。这取决于具体情况，但在这种情况下，我会将和id应用于
。您需要循环如果
el
与
ul
相同，那么
循环不应该继续爬过事件绑定的DOM吗当
循环也
中断时；
如果
el
与
ul
相同，那么它就不会继续爬过事件绑定的DOM？