JavaScript之事件委托和事件代理

JavaScript之事件委托和事件代理

事件委托概念：

事件委托还有一个名字叫事件代理，JS高程上讲：事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。
简单的说就是原本需要一个一个去处理的事件，现在只需要一个总的事件去管理他们即可 （自己理解的，可能有偏差）

用事件委托的意义

在JavaScript中，添加到页面上的事件处理次数将关系到页面的整体运行性能，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，因此减少DOM操作是性能优化的主要思想之一。
每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率越大。如果要用事件委托，就会将所有的操作放到js程序里面，只对它的父级(如果只有一个父级)这一个对象进行操作，与dom的操作就只需要交互一次，这样就大幅度的减少与dom的交互次数，提高性能。

事件委托的原理

事件委托是利用事件的冒泡原理来实现的，就是事件从最深的节点开始，然后逐步向上传播事件。
例如：页面上有这么一个节点树，给最里面的节点加一个onclick事件，那么这个事件就会一层一层的往外执行。如果给最外面的div加点击事件，那么里面的节点做点击事件的时候，都会冒泡到最外层的节点上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

事件冒泡及捕获

事件处理过程分三个阶段：

• 事件捕获阶段：当某个元素触发某个事件，顶层的document就会发出一个事件流，随着DOM节点向目标元素节点流去，直到找到目标节点。注意：该过程事件相应的监听函数不会被触发的。
• 事件目标阶段：找到目标节点之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
• 事件起泡阶段：从目标节点开始，往顶层节点传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被触发。

事件委托的优点

1. 大大减少了监听管理的函数。
2. 可以动态添加和修改元素
3. JavaScript和DOM节点之间的关联变少，进而减少了因循环引用而带来的内存泄漏发生的概率。

实现用事件委托达到直接处理节点一样效果

Event对象提供了一个属性叫target，可以返回事件的目标节点，target就可以表示为当前的事件操作的dom，但是不是真正操作dom。
注意：标准浏览器用ev.target，IE浏览器用event.srcElement
此时只是获取了当前节点的位置，并不知道是什么节点名称，就用nodeName来获取具体是什么标签名。这样实现了用事件委托达到直接处理节点一样效果，且每次只执行一次dom操作。

<script>
       window.onload=function(){
           var a=document.getElementById("a1");
           a.onclick=function(ev){
                   var ev =ev || window.event;
                   var  target=ev.target ||  ev.srcElement;
                   if(target.nodeName  =='li'){
                         alert("哈哈");
                         }
                      }
                  }
  </script>

可以用事件委托的事件：

所有用到按钮的事件，多数的鼠标事件和键盘事件，例如：click，mousedown，mouseup，keydown，keyup，keypress。
注意：mouseover和mouseout虽然也有事件冒泡，但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易