深刻理解事件委托或者事件代理

概述：

事件委托 是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。优势（去快递事件，新员工）。

原因：

在js中，添加到页面上的事件处理程序数量关系到页面的整体运行性能，用for循环遍历所有li，给他们添加事件，不断与dom节点进行交互，访问dom越多，引起浏览器的重绘与重排的次数就越多，延长整个页面的交互就绪时间。优化思想之一减少dom操作原因。如果使用事件委托，所有操作都在js里，与dom的操作只交互一次，大大减少与dom的交互次数，提高性能。

原理：

利用事件冒泡原理实现。事件冒泡，事件从最深的节点开始，逐步向上传播事件。ul>li，给li添加click事件，执行顺序li>ul， 给ul添加事件，点击li时，会出发，这就是事件委托，委托他们父级代为执行事件。

实现：

Event对象提供了一个属性target，可以返回事件的目标节点。标准浏览器使用ev.target，IE浏览器用event.srcElement。

• 相同效果：

var oUl = document.getElementById("ul1");
oUl.onclick = function(ev){
    var ev = ev || window.event ;
    var target = ev.target || ev.srcElement;
    if(target.nodeName.toLocaleLowerCase() == "li"){
        alert(target.innerHTML)
    }
}

• 不同效果：

var oBox = document.getElementById("box");
oBox.onclick = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.nodeName.toLocaleLowerCase() == "input"){
        switch(target.id){
            case "add":
                var aLi = document.createElement("li");
                aLi.innerHTML = "555";
                oUl.appendChild(aLi);
                break;
            case "remove":
                alert("remove");
                break;
            case "move":
                alert("move");
                break;
            case "select":
                alert("select");
                break;
        }
    }
}

• 测试：

$("#ul1").on("click","li",function(e){
    e.stopPropagation();
    alert(123)
})

总结：

适合用事件委托的事件：click，mousedown，mouseup，keyup，keypress。
注意：mouseover与mousemove有事件冒泡，但是要计算位置。
不适合：mouseover，focus，blur。后两个无冒泡特性。
事件触发顺序： 事件触发顺序：keydown – > keypress – > keyup

欢迎分享本文，转载请保留出处：前端ABC » 深刻理解事件委托或者事件代理