事件委托，其實之前有用過，但是就是百度了一下，并不了解它的優(yōu)點到低好在哪里。今天突發(fā)奇想就了解了一下。
那下來總結一下吧。

• 什么是事件委托？
  事件委托，也叫事件代理。利用了事件冒泡，可以用一個事件處理方法，管理處理一類事件。
• 事件委托的好處？
  比如我們要給所有的li設置相同的onclick事件，首先想到的就是用for循環(huán)遍歷了吧，但是每一次遍歷就會進行一次dom操作。而添加到頁面上的事件數(shù)量將直接關系到頁面的整體運行性能，訪問dom的次數(shù)越多，引起瀏覽器重繪與重排的次數(shù)也就越多，就會延長整個頁面的交互就緒時間。所以事件委托的好處就在于大大減少了dom操作的次數(shù)，提高性能。
• 事件委托原理
  利用事件冒泡原理，就是從事件最深的節(jié)點開始，逐步向上傳播事件。
  eg: div > ul > li > a 想要給a加一個點擊事件時，它的執(zhí)行順序就是
  a> li >ul > div,給里面的元素 a,li,ul添加事件時，最后都會冒泡到最外層的div上，所以都會觸發(fā)，委托它們的父級代替它們執(zhí)行。
• 事件委托怎么寫？
  Event對象提供了一個屬性叫target，可以返回事件的目標節(jié)點，稱為事件源，也就是說，target就可以表示為當前的事件操作的dom，但是不是真正操作dom，當然，這個是有兼容性的，標準瀏覽器用ev.target，IE瀏覽器用event.srcElement，此時只是獲取了當前節(jié)點的位置，并不知道是什么節(jié)點名稱，所以還要用nodeName來獲取具體是什么標簽名，這個返回的是一個大寫的，我們需要轉成小寫（toLowerCase（））再做比較
  兼容性寫法:

function (event) {
            let ev = event || window.event;
            let target = ev.target || ev.srcElement;
}

下面看例子吧：

<ul id="ul">
     <li>111</li>
     <li>222</li>
     <li>333</li>
     <li>444</li>
 </ul>

要給上述的每個li一個點擊事件，顯示字符串123。

• 基礎方法：需要遍歷這個li的對象集合，然后給每個li綁定點擊事件

    window.onload = function(){
        const ul= document.getElementById("ul");
        const li = ul.getElementsByTagName('li');
        for(let i=0; i<aLi.length; i++){
            li[i].onclick = function(){
                console.log(123);
            }
        }
    }

• 父級ul做事件處理，觸發(fā)點擊事件（但不是點擊每個結點觸發(fā)的事件）

 window.onload = function () {
        const  ul = document.getElementById("ul");
        ul.onclick = function () {
            alert("1234");
        }
    }

• 事件委托，給父級綁定事件，但當點擊每個結點時才觸發(fā)事件

  window.onload = function () {
        const  ul = document.getElementById("ul");
        ul.onclick = function (event) {
            let target = event.target;
            if(target.nodeName.toLowerCase() === 'li'){
                console.log("1234");
                console.log(target.innerHTML);
            }
        }
    }

上面的例子應該很清晰的可以看出事件委托的優(yōu)點了，減少了遍歷和dom操作的次數(shù)。

對于不同的dom操作如何用事件委托呢？下面再來看個例子，更加深的體會一下吧。

   <div id="box">
       <input type="button" value="添加" id="add">
       <input type="button" value="刪除" id="remove">
       <input type="button" value="選擇" id="chose">
       <input type="button" value="移動" id="move">
   </div>

要實現(xiàn)點擊對應的按鈕，顯示他要執(zhí)行的操作。

• 基本方法: 給每個按鈕都綁定相應的點擊事件

            var add = document.getElementById("add");
            var remove = document.getElementById("remove");
            var move = document.getElementById("move");
            var chose = document.getElementById("chose");
            add.onclick = function(){
                alert('添加');
            };
            remove.onclick = function(){
                alert('刪除');
            };
            move.onclick = function(){
                alert('移動');
            };
            chose.onclick = function(){
                alert('選擇');
            }
        }

• 事件委托:給父級元素綁定點擊事件，點擊不同的按鈕，通過選擇，觸發(fā)事件

  window.onload = function () {
       const  box = document.getElementById("box");
       box.onclick = function (event) {
           let target = event.target;
           switch (target.id.toLowerCase()) {
               case 'add':
                   console.log('添加');
                   break;
               case 'remove':
                   console.log('刪除');
                   break;
               case 'chose':
                   console.log('選擇');
                   break;
               case 'move':
                   console.log("移動");
                   break;
           }
       }
    }

通過這個例子就更清晰的看出事件委托，減少了綁定事件的dom操作。

emmm..下面這個例子就是創(chuàng)建新節(jié)點，并給新節(jié)點綁定相同的事件

   <input type="button" value="添加" id="add">
   <ul id="ul">
       <li>111</li>
       <li>222</li>
       <li>333</li>
       <li>444</li>
   </ul>

要求鼠標放上去為紅色，離開為黃色，添加新節(jié)點，也要有這些事件

• 基本方法：對每一個li標簽進行遍歷操作，注意要想新節(jié)點要有這些事件，得將原有的事件封裝成一個方法，創(chuàng)建新節(jié)點后，調用此方法。

    window.onload = function () {
        const ul = document.getElementById("ul");
        const li = document.getElementsByTagName('li');
        const btn = document.getElementById("add");
        function addNew() {
            for(let i = 0;i<li.length;i++){
                li[i].onmouseover = function () {
                    this.style.backgroundColor = 'red';
                };
                li[i].onmouseout = function () {
                    this.style.backgroundColor ='yellow';
                }
            }
        }
        btn.onclick = function () {
            let one = document.createElement('li');
            one.innerText = '555';
            ul.appendChild(one);
            addNew();
        };
    }

• 事件委托：給父元素綁定事件，點擊子元素觸發(fā)事件，新產生的節(jié)點，也可以擁有相同的事件，不需要別的操作

window.onload = function () {
        const ul = document.getElementById("ul");
        const li = document.getElementsByTagName('li');
        const btn = document.getElementById("add");
        ul.onmouseover = function (event) {
            let target = event.target;
            if(target.nodeName.toLowerCase() === 'li')
                target.style.backgroundColor = 'red';
        };
        ul.onmouseout= function (event) {
            let target = event.target
            if(target.nodeName.toLowerCase() === 'li')
                target.style.backgroundColor = 'yellow';
        };

        btn.onclick = function () {
            let one = document.createElement('li');
            one.innerText = '555';
            ul.appendChild(one);
        };
    };

寫了這么多例子，應該很清晰了。

事件委托其實并不是所有的事件都適合用。
適合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
但是其中mouseover和mouseout都有位置計算問題，所以也不建議使用。

可以參考：js事件委托或事件代理詳解