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

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

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

先來(lái)看看流程圖

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

最后我們?cè)賮?lái)看看代碼

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

on: function(type, selector, fn) {
    if (typeof selector == "function") {
        fn = selector; //兩個(gè)參數(shù)的情況
        //事件綁定過(guò)程
    } else { 
        //事件委托過(guò)程
        for (var i = 0; i < this.length; i++) {
            if ( !this[i].deleId ) {
                this[i].deleId = ++Kodo.deleId;
                //同樣是判斷是否有唯一id
                
                Kodo.deleEvents[Kodo.deleId] = {};
                //沒(méi)有則創(chuàng)建id對(duì)象 也就是f.deleEvents[]新開辟一個(gè)新對(duì)象
                
                Kodo.deleEvents[Kodo.deleId][selector] = {};
                
                //構(gòu)造 selector對(duì)象 
                /*
                *  如 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];//委托元素的事件存儲(chǔ)位置
                    
                if(!position[selector]) {
                    //先判斷如果selector存儲(chǔ)的對(duì)象不存在
                    position[selector] = {};
                    //新建selector對(duì)象 (與上面的selector構(gòu)造相同)
                    position[selector][type] = [fn];
                    //構(gòu)造事件數(shù)組對(duì)象   (與上面的type構(gòu)造相同)
                    
                    delegate(this[i],type,selector);
                    //因?yàn)槭切碌膕elector 所以要再綁定
                } else { 
                    //selector 存儲(chǔ)對(duì)象存在的情況
                    if ( position[selector][type] ) {
                        //如果事件數(shù)組已經(jīng)有了，則直接push進(jìn)來(lái)
                        position[selector][type].push(fn);
                        
                    } else {
                        //如果事件數(shù)組沒(méi)有，那就構(gòu)造事件數(shù)組
                        position[selector][type] = [fn];
                        
                        //因?yàn)槭切碌慕壎ǖ氖录?，所以要重新綁?                        delegate(this[i],type,selector);
                    }

                }
            }
        }
    }
},

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

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

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

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

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

最后看看我們修改過(guò)后的 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) {
        //過(guò)濾函數(shù)
    }
}

這里修改的就只有二個(gè)地方

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

以上就是整個(gè)委托的過(guò)程！

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

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