可想實(shí)現(xiàn)一個(gè)自己的簡(jiǎn)單jQuery庫(kù)？(九)

archieyang 發(fā)布于2019-08-01 14:54 / 2417人閱讀

摘要：事件機(jī)制在講事件機(jī)制之前呢我們有一個(gè)很重要的東西要先講那就是如何實(shí)現(xiàn)事件委托代理只有必須先明白了如何實(shí)現(xiàn)一個(gè)事件委托我們才能更好的去實(shí)現(xiàn)和在我看來(lái)和里最難實(shí)現(xiàn)的就是他的事件委托以上是我對(duì)整個(gè)委托的實(shí)現(xiàn)當(dāng)然在這只做了非常簡(jiǎn)單的實(shí)現(xiàn)沒(méi)有對(duì)很多

Lesson-8

事件機(jī)制

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

只有必須先明白了如何實(shí)現(xiàn)一個(gè)事件委托,我們才能更好的去實(shí)現(xiàn)on和off.在我看來(lái),on和off里最難實(shí)現(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;
            }
        }
    }
}

以上是我對(duì)整個(gè)委托的實(shí)現(xiàn),當(dāng)然在這只做了非常簡(jiǎn)單的實(shí)現(xiàn),沒(méi)有對(duì)很多別的情況進(jìn)行判斷,也沒(méi)有多個(gè)參數(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;
        }
    }
}

先看這個(gè)方法,這其實(shí)就是一個(gè)元素過(guò)濾,作用就是為了過(guò)濾出我們委托的元素具體是誰(shuí).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);

然后是我們的主要部分.其實(shí)這里就很簡(jiǎn)單,while的條件判斷兩個(gè),第一個(gè)是是否阻止冒泡,第二個(gè)判斷是冒泡是否到頂.

接著我們進(jìn)行filiter進(jìn)行過(guò)濾,如果返回true,則是我們的委托元素,直接call即可.

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

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

您的star是檢驗(yàn)代碼的唯一標(biāo)準(zhǔn)!:)

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

云服務(wù)器 GPU云服務(wù)器 js實(shí)現(xiàn)的簡(jiǎn)單特效怎么搭建一個(gè)自己的視頻網(wǎng)站如何搭建一個(gè)自己的服務(wù)器用c實(shí)現(xiàn)簡(jiǎn)單的shell

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/49651.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

archieyang

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

常見(jiàn)的編譯器

閱讀 2910·2021-10-14 09:42
寶塔面板安裝pdftoolbox – 一個(gè)好用的PDF在線工具箱

閱讀 1257·2021-09-24 10:32
C語(yǔ)言深層理解：函數(shù)中棧幀的創(chuàng)建與銷毀

閱讀 2973·2021-09-23 11:21
阿里云：云上年中鉅惠 - 輕量應(yīng)用服務(wù)器60元/年 ECS云服務(wù)器72元/年

閱讀 2852·2021-08-27 13:10
CSS動(dòng)畫(huà)優(yōu)雅降級(jí)的簡(jiǎn)單總結(jié)

閱讀 3343·2019-08-29 18:41
flask基礎(chǔ)之一

閱讀 2206·2019-08-29 15:16
這些國(guó)外前端周刊值得你收藏一下

閱讀 1217·2019-08-29 13:17
多圖片展開(kāi)收縮實(shí)例

閱讀 900·2019-08-29 11:22

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

可想實(shí)現(xiàn)一個(gè)自己的簡(jiǎn)單jQuery庫(kù)？(九)

相關(guān)文章