js事件委托

Posted 2020-10-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js事件委托相关的知识，希望对你有一定的参考价值。

事件委托又称事件代理，即利用事件的冒泡机制

那我们在什么时候用事件委托呢？在需要添加事件的元素很多并且这些元素需要频繁增删且不能刷新的的时候我们就需要事件委托了，例如我们在用javascript写一个todoList时就需要用到事件委托

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件委托</title>
<script>

window.onload = function(){

    var oUl = document.getElementById(‘oul‘);
    var aLi = oUl.getElementsByTagName(‘li‘);
    var btn = document.getElementById(‘btn‘);
    var Count = 0;
    
    oUl.onclick = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        
        if(target.nodeName.toLowerCase() == ‘li‘){
            console.log(target)
        }
    
    };
    
    btn.onclick = function(){
    
        Count++;
        var oLi = document.createElement(‘li‘);
        oLi.innerHTML = 111 * Count;
        oUl.appendChild(oLi);
    
    };

};

</script>
</head>

<body>
<button id="btn">添加</button>    
<ul id="oul">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
</ul>
</body>
</html>

这就是事件委托的简单案例，通过将事件抛给上层的ul而通过检查事件的目标对象（target）来判断并获取事件源li;

为父节点添加一个点击事件，然后当点击子节点时，click会向上冒泡，而父节点捕获该事件之后通过target.nodeName来判断是否为我们需要操作的节点，

事件冒泡及捕获
浏览器的事件冒泡机制,对于事件的捕获和处理，不同的浏览器厂商有不同的处理机制，这里介绍W3C对DOM2.0定义的标准事件。

DOM2.0模型将事件处理流程分为三个阶段：

（1）事件捕获阶段（2）事件目标阶段（3）事件起泡阶段

事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。

事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

事件起泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）来阻止事件的冒泡传播。

以上是关于js事件委托的主要内容，如果未能解决你的问题，请参考以下文章