可想實現一個本身的簡單jQuery庫？(九)

Lesson-8

---

事件機制

在講事件機制以前呢,咱們有一個很重要的東西要先講,那就是如何實現事件委託(代理).

只有必須先明白瞭如何實現一個事件委託,咱們才能更好的去實現on和off.在我看來,on和off裏最難實現的就是他的事件委託.

function delegate(agent,type,selector,fn) {
    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)) {
                bubble = fn.call(target,e);
            }
            target = target.parentNode;
            return bubble;
        }
    },false);
    function filiter(agent,selector,target) {
        var nodes = agent.querySelectorAll(selector);
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i] == target) {
                return true;
            }
        }
    }
}

以上是我對整個委託的實現,固然在這隻作了很是簡單的實現,沒有對不少別的狀況進行判斷,也沒有多個參數是否捕捉.

咱們先拆解下分析.

function filiter(agent,selector,target) {
    var nodes = agent.querySelectorAll(selector);
    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i] == target) {
            return true;
        }
    }
}

先看這個方法,這其實就是一個元素過濾,做用就是爲了過濾出咱們委託的元素具體是誰.target就是咱們具體的委託元素

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)) {
            bubble = fn.call(target,e);
        }
        target = target.parentNode;
        return bubble;
    }
},false);

而後是咱們的主要部分.其實這裏就很簡單,while的條件判斷兩個,第一個是是否阻止冒泡,第二個判斷是冒泡是否到頂.

接着咱們進行filiter進行過濾,若是返回true,則是咱們的委託元素,直接call便可.

若是不作過多的兼容處理,實現一個委託仍是比較容易的.

PS:若是您仍是不太明白,能夠來這看更具體的解釋.http://www.meckodo.com/?p=309

您的star是檢驗代碼的惟一標準!:)

github地址: https://github.com/MeCKodo/forchange/tree/master/lesson-8
可想實現一個本身的簡單jQuery庫？(八)：http://segmentfault.com/a/1190000004025152