一、什么是事件委托

事件委托也叫事件代理，就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。網(wǎng)上有個經(jīng)典栗子，取快遞來解釋事件委托原理：

有三個同事預計在周一收到快遞，有兩個辦法簽收快遞，一是三個人一起在公司門口等快遞；二是委托給前臺MM代為簽收?，F(xiàn)實中，我們大都采用第二種辦法，前天MM收到快遞后，會判斷收件人是誰，然后按照收件人的要求簽收，甚至代為付款。即使公司來了新員工（不管多少），前臺MM也會核實身份后代為簽收。

主要有兩個含義：

• 委托前臺MM和可以的，現(xiàn)有DOM節(jié)點是有事件的。
• 新員工也可以被前臺MM代為簽收，即新添加DOM也是有事件的。

二、為什么使用事件代理

節(jié)省內(nèi)存，提高性能

三、事件委托的原理

事件委托是利用事件的冒泡原理來實現(xiàn)的，事件從最開始的節(jié)點向上傳播事件。

四、事件委托的實現(xiàn)

1.經(jīng)典的ul,li栗子

    <ul id="parent-list">
        <li id="post-1">Item 1</li>
        <li id="post-2">Item 2</li>
        <li id="post-3">Item 3</li>
        <li id="post-4">Item 4</li>
        <li id="post-5">Item 5</li>
        <li id="post-6">Item 6</li>
    </ul>
    
    <script>
        document.getElementById("parent-list").addEventListener("click",function(e){
            if(e.target && e.target.nodeName == "LI" ){//nodeName大寫
                console.log("List Item",e.target.id,"clicked");
            }
        })
    </script>

文章參考：凌云之翼

五、jQuery中的事件委托

主要有幾種方法：

• $.on

$('.parent').on('click','a',function(){
    console.log('click')
})
//parent元素下的a標簽事件代理到$('.parent')上，然后響應事件

• $.delegte

$('.parent').delegate('a','click',function(){
    console.log('click')
})

• $.live 同上，目前已廢除