国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

可想實現(xiàn)一個自己的簡單jQuery庫？(九)

gnehc / 2357人閱讀

摘要：事件機制在講事件機制之前呢我們有一個很重要的東西要先講那就是如何實現(xiàn)事件委托代理只有必須先明白了如何實現(xiàn)一個事件委托我們才能更好的去實現(xiàn)和在我看來和里最難實現(xiàn)的就是他的事件委托以上是我對整個委托的實現(xiàn)當然在這只做了非常簡單的實現(xiàn)沒有對很多

Lesson-8

事件機制

在講事件機制之前呢,我們有一個很重要的東西要先講,那就是如何實現(xiàn)事件委托(代理).

只有必須先明白了如何實現(xiàn)一個事件委托,我們才能更好的去實現(xiàn)on和off.在我看來,on和off里最難實現(xiàn)的就是他的事件委托.

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;
            }
        }
    }
}

以上是我對整個委托的實現(xiàn),當然在這只做了非常簡單的實現(xiàn),沒有對很多別的情況進行判斷,也沒有多個參數(shù)是否捕捉.

我們先拆解下分析.

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即可.

如果不做過多的兼容處理,實現(xiàn)一個委托還是比較容易的.

PS:如果您還是不太明白,可以來這看更具體的解釋.http://www.meckodo.com/?p=309

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/86259.html

相關(guān)文章

  • 可想實現(xiàn)一個自己的簡單jQuery庫？(九)

    摘要：事件機制在講事件機制之前呢我們有一個很重要的東西要先講那就是如何實現(xiàn)事件委托代理只有必須先明白了如何實現(xiàn)一個事件委托我們才能更好的去實現(xiàn)和在我看來和里最難實現(xiàn)的就是他的事件委托以上是我對整個委托的實現(xiàn)當然在這只做了非常簡單的實現(xiàn)沒有對很多 Lesson-8 事件機制 在講事件機制之前呢,我們有一個很重要的東西要先講,那就是如何實現(xiàn)事件委托(代理). 只有必須先明白了如何實現(xiàn)一個事件委...

    archieyang 評論0 收藏0

  • 可想實現(xiàn)一個自己的簡單jQuery庫？(三)

    摘要：這個版本新增這個選擇元素的方法還是比較常用的首先我們需要一個來過濾我們需要的上面那段比較簡單就是普通的過濾下元素看下方法的源碼就知道我傳入數(shù)組對象的個對象然后取它的下一個同輩元素直接返回方法同理這段是取到第一個父元素由于返回的不是原生的對 Lesson-2 這個版本新增 next(),prev(),parent(),parents() 這4個選擇元素的方法還是比較常用的 首先我們需要...

    xiaoxiaozi 評論0 收藏0

  • 可想實現(xiàn)一個自己的簡單jQuery庫？(八)

    摘要：兼容性簡直神器有木有所以我們寫一個這樣的方法吧實現(xiàn)操作然后只需要傳對應(yīng)參數(shù)就好了如此簡單接著是方法在這我只做刪除自身節(jié)點就沒繼續(xù)拓展了大家可以自行完善只能刪除自身您給予的就是給代碼賦予靈魂地址可想實現(xiàn)一個自己的簡單庫七 Lesson-7 新增 html,append,before,after,remove html: function (value) { if (value ...

    X_AirDu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<