Javascript中的事件委托(事件代理)

Posted

tags:

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

  之前我们说过用 for 循环绑定事件 没看过的点这里   今天我们介绍一种更加方便的方法,就是事件委托,也叫事件代理;

  件事委托是什么

  事件委托:简单说就是把一个事件交给别人来完成,就是利用冒泡原理,将事件绑定到节点的父级节点上,触发执行效果。

  件事委托的好处

  1. 提高javascript性能。假如现在有个 ul,里面有10个 li,每个 li 都需要触发事件,之前我们说过可以用 for 循环,遍历所有的 li,然后添加事件,这样会影响Javascript性能。
  2. 动态绑定事件,可以给暂未存在的元素绑定事件

  举个栗子

  这里要用到event对象,event对象有个 target 属性,可以返回触发此事件的元素。然后通过nodeName获取节点名称,再用toLowerCase()转换成小写(可以省略)

 

<body>
    <ul id="ul">
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li>5555</li>
    </ul>
    
    <script type="text/javascript">
        var oUl = document.getElementById("ul");
        oUl.onclick = function(ev){
            // 获取事件,兼容IE
            var ev = ev || window.event; 
            
            // 成为事件源(就是当前操作的元素) 标准浏览器用ev.target;IE浏览器用event.srcElement
            var target = ev.target || ev.srcElement;  

            // toLowerCase()把nodeName返回的值转换成小写,如果不写则需要 == "Li"
            if(target.nodeName.toLowerCase() == li){   
                alert("abc");
            }
        };
    </script>
</body> 

  这样一来,相对 for 循环,如果 li 数量很多的话,大大提高了Javascript性能,因为每次只执行一次dom操作,不需要再去遍历 li 元素。

  除了提高Javascript性能之外,还可以动态的绑定事件,给后来添加的元素也能享受此权利,举个栗子:

<body>
    <ul id="ul">
        <input type="button" name="" id="btn" value="添加li" />
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li>5555</li>
    </ul>
    
    <script type="text/javascript">
        var oUl = document.getElementById("ul");
        var oBtn = document.getElementById("btn");
        
     // 添加鼠标移入效果 oUl.onmouseover
= function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == li){ target.style.background = "#f00"; } };
     // 添加鼠标移出效果 oUl.onmouseout
= function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == li){ target.style.background = "#fff"; } };
     // 添加新的li oBtn.onclick
= function(){var oLi = document.createElement(li); oLi.innerhtml = 6666; oUl.appendChild(oLi); }; </script> </body>

 无论添加多少个 li,都会自动绑定鼠标移入移出事件,不要再去遍历 li 了,这就是事件委托的好处




以上是关于Javascript中的事件委托(事件代理)的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript中事件委托(事件代理)详解

Js中的事件委托/事件代理

js中的事件委托或事件代理

js中的事件委托或是事件代理详解

JS中的事件委托/代理详解

js中的事件委托(事件代理)详解