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的關聯
可以動態添加與刪除元素