事件委托

Posted 2020-10-10 sandy.simple

事件委托在js高级程序设计中的事件章节被提到。内容参考了红书高级程序设计，写下来供自己和大家参考。

对“事件处理程序过多的”的解决方案就是事件委托。事件委托 利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

因为在js中，添加到页面的事件处理程序的数量将会关系到页面的整体运行性能。导致这个问题的原因是多方面的，1：函数是对象，对象占据内存，内存中的对象越多性能越差；2：必须事先指定的所有事件处理程序会导致dom的访问次数，会延续整个页面的交互就绪时间。这样利用事件委托可以提升性能。

下面例子

<div id="mylinks">
    <div id="goSomewhere">go somewhere</div>
    <div id="doSomething">do something</div>
    <div id="sayhi">sayHi</div>
</div>

//点击3个列表，执行三个操作，以往做法：

       var item1 = document.getElementById("goSomewhere");
       var item2 = document.getElementById("doSomething");
       var item3 = document.getElementById("sayHi");
       EventUtil.addHandeler(item1,"click",function(event) {
           location.href = "www.baidu.com";
       });
       EventUtil.addHandeler(item2,"click",function(event) {
           document.title = " i changed title";
       });
       EventUtil.addHandeler(item3,"click",function(event){
           alert("hi");
       });

//利用事件委托，只需要在dom树中尽量在最高的层次上添加一个事件处理程序，如下：

       var list = document.getElementById("mylinks");
       EventUtil.addHandeler(list,"click",function(event) {
           event = EventUtil.getEvent(event);
           var target = EventUtil.getTarget(event);
           switch(target.id){
               case "goSomewhere":
               location.href = "www.baidu.com";
               break;
               case "doSomething":
               document.title = "i changes title";
               break;
               case "sayHi":
               alert("hi");
               default:
               console.log("error");
           }
       })

因为所有列表都是这个元素ur:id ="myLinks"的子元素，而且他们的事件冒泡，最终单击元素会冒泡到这个这个函数处理事件。这样与以往做法相比，这段代码的消耗会变低，因为只取了一个dom元素，只添加了一个事件处理程序，这样占据的内存会更少。

所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用事件委托技术。

采用事件委托的优点：

1.document对象很快就访问到，而且可以在页面生命周期的任何时间点为它添加事件处理程序。换句话说，只要单击的元素呈现在页面上，就可以立即具备适当的功能。

2.在页面上设置事件处理程序所需的时间更少。只需要添加一个事件处理程序所需的dom引用更少，所花时间也少。

3.整个页面占用的内存空间更少，能够提升整体性能。

最适合采用事件委托的事件包括：

click,mousedown,mouseup,keyup,keydown,keypress.