摘要：實現的事件委托我們能根據之前的思路利用同樣的方法實現一個事件委托先來看看流程圖然后先看看結果是如何，畢竟流程圖看的也不一定能懂。通過在里查找對應的事件數組，循環執行即可以上就是整個委托的過程地址可想實現一個自己的簡單庫十

實現on,off的事件委托!

我們能根據之前的思路,利用同樣的方法實現一個事件委托.

先來看看流程圖

然后先看看結果是如何，畢竟流程圖看的也不一定能懂。

最后我們再來看看代碼

Kodo.deleEvents = []; //事件委托存放的事件
Kodo.deleId = 0; //事件委托的唯一標識

on: function(type, selector, fn) {
    if (typeof selector == "function") {
        fn = selector; //兩個參數的情況
        //事件綁定過程
    } else { 
        //事件委托過程
        for (var i = 0; i < this.length; i++) {
            if ( !this[i].deleId ) {
                this[i].deleId = ++Kodo.deleId;
                //同樣是判斷是否有唯一id
                
                Kodo.deleEvents[Kodo.deleId] = {};
                //沒有則創建id對象 也就是f.deleEvents[]新開辟一個新對象
                
                Kodo.deleEvents[Kodo.deleId][selector] = {};
                
                //構造 selector對象 
                /*
                *  如 Kodo.deleEvents[1] = 
                *  ｛
                *       "#box li" : {},
                *        "#pox" : {}
                *   ｝
                */
                
                Kodo.deleEvents[Kodo.deleId][selector][type] = [fn];
                //構造我們的事件數組
                /*
                *  如 Kodo.deleEvents["#box li"] = 
                *  {
                *       "click" : [fn1,fn2...],
                *        "touchstart" : [fn1,fn2....]
                *   }
                */
                delegate(this[i],type,selector);
                //用委托的方式進行綁定
            } else {
                //如果id存在的情況
                var id = this[i].deleId,
                    position = Kodo.deleEvents[id];//委托元素的事件存儲位置
                    
                if(!position[selector]) {
                    //先判斷如果selector存儲的對象不存在
                    position[selector] = {};
                    //新建selector對象 (與上面的selector構造相同)
                    position[selector][type] = [fn];
                    //構造事件數組對象   (與上面的type構造相同)
                    
                    delegate(this[i],type,selector);
                    //因為是新的selector 所以要再綁定
                } else { 
                    //selector 存儲對象存在的情況
                    if ( position[selector][type] ) {
                        //如果事件數組已經有了，則直接push進來
                        position[selector][type].push(fn);
                        
                    } else {
                        //如果事件數組沒有，那就構造事件數組
                        position[selector][type] = [fn];
                        
                        //因為是新的綁定的事件，所以要重新綁定
                        delegate(this[i],type,selector);
                    }

                }
            }
        }
    }
},

繼續再看一遍log的結果，對比剛剛的代碼

連同代碼，我在注釋里已經非常的詳細解釋了整個過程，大家結合控制臺log的結果，在看看最初的流程圖結合的看，我相信有點點耐心就能馬上理解了。

綁定過程都會比較復雜，理解了綁定過程后，下面off的實現就很容易了。

off本身是可以傳2個參數的，第一個參數為事件type，第二個參數是委托元素selector

off: function(type, selector) {
    if (arguments.length == 0) {
        //如果沒傳參數，清空所有事件
    
    } else if (arguments.length == 1) {
        //指定一個參數，則清空對應的事件
        
    } else {
        //直接根據dom上存有的deleId，找到對應的deleEvents里的位置
        //刪除委托元素上的type事件數組即可
        for (var i = 0; i < this.length; i++) {
            var id = this[i].deleId;
            delete Kodo.deleEvents[id][selector][type];
        }
    }
}

最后看看我們修改過后的 delegate方法

function delegate(agent, type, selector) {
    var id = agent.deleId; //先獲取被委托元素的deleId
    agent.addEventListener(type, function(e) {
        var target = e.target;
        var ctarget = e.currentTarget;
        var bubble = true;

        while (bubble && target != ctarget) {
            if (filiter(agent, selector, target)) {
                for (var i = 0; i < Kodo.deleEvents[id][selector][type].length; i++) {
                    bubble = Kodo.deleEvents[id][selector][type][i].call(target, e);
                    //循環事件數組 直接call
                }
            }
            target = target.parentNode;
            return bubble;
        }
    }, false);

    function filiter(agent, selector, target) {
        //過濾函數
    }
}

這里修改的就只有二個地方

1.獲取被委托元素的deleId，因為我們整個委托機制都與他有關。
2.通過id在deleEvents里查找對應的事件數組，循環執行即可

以上就是整個委托的過程！

f("you").on("star","me",function(){
    console.log("success!");
});

github地址: https://github.com/MeCKodo/forchange/tree/master/lessonn-10
可想實現一個自己的簡單jQuery庫？(十)：http://segmentfault.com/a/1190000004028779