javascript事件委托的原理与实现

事件委托

事件流

1. 捕获：查找目标元素；
2. 目标：执行目标的事件；
3. 冒泡：依次执行祖先元素的事件。
   onmouseenter和onmouseleave不支持冒泡；
   onmouseover和onmouseout支持冒泡。

事件对象

1. event
   属性target:可以判定当前点击的目标对象 火狐
   谷歌:
   target
   srcElement

2. 在IE低版本 event不兼容

   window.event
   srcElement
   要想获取到目标对象

   3.事件委托

​ 将对自己的操作委托给父元素去执行

  //box	是父元素
  box.onclick=function(event){
    //事件对象的兼容
    var eve=event||window.event;
    //获取的是目标对象
    var target=eve.target||eve.srcElement;
    //	target是当前点击的对象
  }

在事件委托的时候，鼠标点击的对象有很多中情况，我们要找到我们需要的那个对象；

比如上面想要点击li包括li里面的span、div，简单获取事件对象就可能会有div、span、li这些内容

但是我们想无论点击的是div还是span都是指向的它们所在的li标签，所以当点击的是span或者div的时候，就需要找到它们对应的li，找到以后执行相关操作，找不到就以ul为最总查找节点

解决方法：
若target为当前点击的对象，可能有ul,li,h2,p,span,i ；
需要点击li里面的内容，li改变样式，点击ul没有变化；
点击的时候需要找到li
下面的函数传参
var target = getTarget(target, “tagName”, “LI”, “UL“)；
target表示我们点击的事件源，tagName表示查找的属性，LI为属性值，UL为结束条件。
如果target不是UL，证明点击的不是ul，继续查找，如果target[tagName]等于"LI",则证明查找到了li，直接返回target，否则继续查找父节点，直到查找到UL，此时代表没有找到，返回undefined。

  function getTarget(target, attr, value, end) {
    while (target != end) { //如果鼠标点击的是end，则直接结束
      if (target[attr] == value) {    //如果点击的对象的attr属性值为value，则返回该对象
        return target;
      }
      target = target.parentNode; //否则查找其父节点
    }
  }

事件委托的优势

​ 以ul>li*10为例：

​ 将对li的事件 委托给ul去执行
dom数量减少
函数数量减少
对新增加的元素也是生效的

​ 原理：基于事件冒泡
减少函数数量
减少dom与js的关联
可以动态添加与删除元素