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是当前点击的对象
        }

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

​ 解决方法：

若target为当前点击的对象，可能有ul,li,h2,p,span,i ；

需要点击li里面的内容，li改变样式，点击ul没有变化；

点击的时候需要找到li

下面的函数传参

var target = function 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的关联

可以动态添加与删除元素