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

概述:

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

原因:

在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 » 深刻理解事件委托或者事件代理

赞 (2)
分享到:更多 ()

发表评论 0