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

實(shí)現(xiàn)on,off的事件委托!

我們能根據(jù)之前的思路,利用同樣的方法實(shí)現(xiàn)一個事件委托.

先來看看流程圖

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

最后我們再來看看代碼

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

on: function(type, selector, fn) {
    if (typeof selector == "function") {
        fn = selector; //兩個參數(shù)的情況
        //事件綁定過程
    } else { 
        //事件委托過程
        for (var i = 0; i < this.length; i++) {
            if ( !this[i].deleId ) {
                this[i].deleId = ++Kodo.deleId;
                //同樣是判斷是否有唯一id
                
                Kodo.deleEvents[Kodo.deleId] = {};
                //沒有則創(chuàng)建id對象 也就是f.deleEvents[]新開辟一個新對象
                
                Kodo.deleEvents[Kodo.deleId][selector] = {};
                
                //構(gòu)造 selector對象 
                /*
                *  如 Kodo.deleEvents[1] = 
                *  ｛
                *       "#box li" : {},
                *        "#pox" : {}
                *   ｝
                */
                
                Kodo.deleEvents[Kodo.deleId][selector][type] = [fn];
                //構(gòu)造我們的事件數(shù)組
                /*
                *  如 Kodo.deleEvents["#box li"] = 
                *  {
                *       "click" : [fn1,fn2...],
                *        "touchstart" : [fn1,fn2....]
                *   }
                */
                delegate(this[i],type,selector);
                //用委托的方式進(jìn)行綁定
            } else {
                //如果id存在的情況
                var id = this[i].deleId,
                    position = Kodo.deleEvents[id];//委托元素的事件存儲位置
                    
                if(!position[selector]) {
                    //先判斷如果selector存儲的對象不存在
                    position[selector] = {};
                    //新建selector對象 (與上面的selector構(gòu)造相同)
                    position[selector][type] = [fn];
                    //構(gòu)造事件數(shù)組對象   (與上面的type構(gòu)造相同)
                    
                    delegate(this[i],type,selector);
                    //因?yàn)槭切碌膕elector 所以要再綁定
                } else { 
                    //selector 存儲對象存在的情況
                    if ( position[selector][type] ) {
                        //如果事件數(shù)組已經(jīng)有了，則直接push進(jìn)來
                        position[selector][type].push(fn);
                        
                    } else {
                        //如果事件數(shù)組沒有，那就構(gòu)造事件數(shù)組
                        position[selector][type] = [fn];
                        
                        //因?yàn)槭切碌慕壎ǖ氖录砸匦陆壎?                        delegate(this[i],type,selector);
                    }

                }
            }
        }
    }
},

繼續(xù)再看一遍log的結(jié)果，對比剛剛的代碼

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

綁定過程都會比較復(fù)雜，理解了綁定過程后，下面off的實(shí)現(xiàn)就很容易了。

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

off: function(type, selector) {
    if (arguments.length == 0) {
        //如果沒傳參數(shù)，清空所有事件
    
    } else if (arguments.length == 1) {
        //指定一個參數(shù)，則清空對應(yīng)的事件
        
    } else {
        //直接根據(jù)dom上存有的deleId，找到對應(yīng)的deleEvents里的位置
        //刪除委托元素上的type事件數(shù)組即可
        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);
                    //循環(huán)事件數(shù)組 直接call
                }
            }
            target = target.parentNode;
            return bubble;
        }
    }, false);

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

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

1.獲取被委托元素的deleId，因?yàn)槲覀冋麄€委托機(jī)制都與他有關(guān)。
2.通過id在deleEvents里查找對應(yīng)的事件數(shù)組，循環(huán)執(zhí)行即可

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

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

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