事件委託

事件委託（事件代理）

概述

事件委託就是利用事件冒泡，指定一個事件處理程序，就能夠管理某一類的事件

時間委託的好處

一、節省內存開銷

二、追加節點一樣有效

爲何要用事件委託

通常來講，dom須要事件處理，咱們直接給他設事件處理就行了，可是若是多了dom的話，咱們就須要設多個事件，這樣大大的增長了內存的開銷。好比咱們有1000個li，每個都加一個click事件，那麼咱們就增長了1000個內存空間，若是使10000個，100000個的話，可想而知咱們將要開闢10000個,100000個乃至跟多，因此咱們若是用事件委託， 只對他的父級進行一個dom操做的話，咱們只須要開闢一塊內存空間就ok。

事件委託怎麼實現

在作事件委託以前咱們先作個通常的方法的例子

子節點實現相同的功能：

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

實現功能是劃過變色

var lis = document.getElementsByTagName("li")
for(var i=0,l=lis.length;i<l;i++){
    lis[i].onmousemove= function(){
        this.className="light";
    }
    lis[i].onmouseout = function(){
        this.className="";
    }
}

上面代碼的意思很簡單，首先要找到ul，而後遍歷li，而後劃過那個li的時候，又要找一次li的位置，每次劃過都要找。若是咱們自動追li的時候，每追加一次咱們就得寫一次for，咱們將消耗太多的內存。

那麼咱們用事件委託的方式作

window.onload = function(){
    var oUl = document.getElementById("ul1");
   oUl.onmousemove= function(ev){
        var oEvent = ev || window.event;
　　　　var target = oEvent.target || oEvent.srcElement;
　　　　target.className="light";
    }
   oUl.onmouseout = function(ev){
        var oEvent = ev || window.event;
　　　　var target = oEvent.target || oEvent.srcElement;
　　　　target.className="";
    }
}

從上面咱們能夠看出咱們只給li父級一個事件，那麼咱們在劃過每個li的時候，每次只執行一次dom操做。