原生js實現(xiàn)on與off 方法

tanglijun 發(fā)布于2019-08-26 13:54 / 909人閱讀

摘要：所以僅對參數(shù)進行了處理，功能上沒有實現(xiàn)子選擇器事件觸發(fā)后執(zhí)行的函數(shù)指定事件是否在捕獲或冒泡階段執(zhí)行事件句柄在捕獲階段執(zhí)行默認(rèn)。

使用過jQuery的同學(xué)，應(yīng)該對事件綁定方法 .on() .off() 有一定的了解。 在個人類庫jTool 中實現(xiàn)了這兩個方法，這里就來細(xì)說下原生實現(xiàn)方式。

實現(xiàn)方式

以下為個人類庫jTool 中 Event 實現(xiàn)方式。
代碼中使用到一個基礎(chǔ)方法對象utilities ，該對象為jTool 的基礎(chǔ)類。 如果想了解更多，可以通過點擊進入查看原碼。

一個空殼子

首先通過一個空架子來了解下實現(xiàn)邏輯，核心實現(xiàn)在getEventObject() 方法內(nèi)的包裝函數(shù)

var Event = {
    // 綁定
    on: function(event, querySelector, callback, useCapture){
        return this.addEvent(this.getEventObject(event, querySelector, callback, useCapture));
    }，
    // 解除綁定
    off: function(event, querySelector) {
        return this.removeEvent(this.getEventObject(event, querySelector));
    },
    // 獲取 jTool Event 對象
    getEventObject: function (event, querySelector, callback, useCapture){
        // 事件代理實現(xiàn)核心
        // 注意: 這個方法為包裝函數(shù),此處的this為觸發(fā)事件的Element
        var fn = callback;
            callback = function(e){
                // 驗證子選擇器所匹配的nodeList中是否包含當(dāng)前事件源 或 事件源的父級
                // 注意: 這個方法為包裝函數(shù),此處的this為觸發(fā)事件的Element
                var target = e.target;
                while(target !== this ){
                    if([].indexOf.call( this.querySelectorAll(querySelector), target) !== -1){
                        fn.apply(target, arguments);
                        break;
                    }
                    target = target.parentNode;
                }
            };
    
        return {
                eventName: event + querySelector,
                type: event,
                querySelector: querySelector,
                callback: callback || utilities.noop,
                useCapture: useCapture || false
            };
    },
    // 增加事件,并將事件對象存儲至DOM節(jié)點
    addEvent: function (eventList){
    }，
    // 刪除事件,并將事件對象移除出DOM節(jié)點
    removeEvent: function (eventList){
    
    }
}

參數(shù)說明

event: 事件名, 如 "click"，并支持 "click.scope1" 事件域的方法(雖然支持，但由于暫時沒有使用場景。所以僅對參數(shù)進行了處理，功能上沒有實現(xiàn))

querySelector: 子選擇器

callback: 事件觸發(fā)后執(zhí)行的函數(shù)

useCapture: 指定事件是否在捕獲或冒泡階段執(zhí)行.true - 事件句柄在捕獲階段執(zhí)行 false- 默認(rèn)。事件句柄在冒泡階段執(zhí)行

eventList: 由 .getEventObject() 方法生成的 Event 對象，

on的實現(xiàn)邏輯

通過調(diào)用jTool實例的on方法，傳入?yún)?shù)

調(diào)用getEventObject() 獲取事件對象

調(diào)用addEvent() 方法進行事件綁定

off的實現(xiàn)邏輯

通過調(diào)用jTool實例的off方法，傳入?yún)?shù)

調(diào)用getEventObject()獲取事件對象

調(diào)用removeEvent()方法解除事件綁定

完整Event對象

var _Event = {
    on: function(event, querySelector, callback, useCapture) {
        // 將事件觸發(fā)執(zhí)行的函數(shù)存儲于DOM上, 在清除事件時使用
    },
    
    off: function(event, querySelector) {
        return this.removeEvent(this.getEventObject(event, querySelector));
    },
    
    bind: function(event, callback, useCapture) {
        return this.on(event, undefined, callback, useCapture);
    },
    
    unbind: function(event) {
        return this.removeEvent(this.getEventObject(event));
    },
    // 獲取 jTool Event 對象
    getEventObject: function(event, querySelector, callback, useCapture) {
        // $(dom).on(event, callback);
        if (typeof querySelector === "function") {
            useCapture = callback || false;
            callback = querySelector;
            querySelector = undefined;
        }
        // event callback 為必要參數(shù)
        if (!event) {
            utilities.error("事件綁定失敗,原因: 參數(shù)中缺失事件類型");
            return this;
        }
    
        // 子選擇器不存在 或 當(dāng)前DOM對象包含Window Document 則將子選擇器置空
        if(!querySelector || utilities.type(this.DOMList[0]) !== "element"){
            querySelector = "";
        }
        // #Event003 存在子選擇器 -> 包裝回調(diào)函數(shù), 回調(diào)函數(shù)的參數(shù)
        // 預(yù)綁定功能實現(xiàn)
        if(querySelector !== ""){
            var fn = callback;
            callback = function(e){
                // 驗證子選擇器所匹配的nodeList中是否包含當(dāng)前事件源 或 事件源的父級
                // 注意: 這個方法為包裝函數(shù),此處的this為觸發(fā)事件的Element
                var target = e.target;
                while(target !== this ){
                    if([].indexOf.call( this.querySelectorAll(querySelector), target) !== -1){
                        fn.apply(target, arguments);
                        break;
                    }
                    target = target.parentNode;
                }
            };
        }
        var eventSplit = event.split(" ");
        var eventList = [],
            eventScopeSplit,
            eventObj;
    
        utilities.each(eventSplit, function(i, eventName) {
            if (eventName.trim() === "") {
                return true;
            }
    
            eventScopeSplit = eventName.split(".");
            eventObj = {
                eventName: eventName + querySelector,
                type: eventScopeSplit[0],
                querySelector: querySelector,
                callback: callback || utilities.noop,
                useCapture: useCapture || false,
                // TODO: nameScope暫時不用
                nameScope: eventScopeSplit[1] || undefined
            };
            eventList.push(eventObj);
        });
        return eventList;
    },
    
    // 增加事件,并將事件對象存儲至DOM節(jié)點
    addEvent: function(eventList) {
        var _this = this;
        utilities.each(eventList, function (index, eventObj) {
            utilities.each(_this.DOMList, function(i, v){
                v.jToolEvent = v.jToolEvent || {};
                v.jToolEvent[eventObj.eventName] = v.jToolEvent[eventObj.eventName] || [];
                v.jToolEvent[eventObj.eventName].push(eventObj);
                v.addEventListener(eventObj.type, eventObj.callback, eventObj.useCapture);
            });
        });
        return _this;
    },
    
    // 刪除事件,并將事件對象移除出DOM節(jié)點
    removeEvent: function(eventList) {
        var _this = this;
        var eventFnList; //事件執(zhí)行函數(shù)隊列
        utilities.each(eventList, function(index, eventObj) {
            utilities.each(_this.DOMList, function(i, v){
                if (!v.jToolEvent) {
                    return;
                }
                eventFnList = v.jToolEvent[eventObj.eventName];
                if (eventFnList) {
                    utilities.each(eventFnList, function(i2, v2) {
                        v.removeEventListener(v2.type, v2.callback);
                    });
                    v.jToolEvent[eventObj.eventName] = undefined;
                }
            });
        });
        return _this;
    }
};

.on()與.bind()都可以進行事件綁定，區(qū)別在于.on()使用事件代理。事件代理是一種事件預(yù)綁定機制，該機制可以在事件節(jié)點不存在的情況下，將事件綁定至已存在父級節(jié)點之上的方式。

隨筆一行
這是前端最好的時代，這也是前端最壞的時代。眾多前端框架滿天飛，隨著 jQuery 在前端行業(yè)的慢慢弱化，總是會有一種斯人遠(yuǎn)去，何者慰籍的感覺?；ッ惆?，各位。

另推薦個表格組件gridManager

云服務(wù)器 GPU云服務(wù)器 js off方法原生js實現(xiàn) ajax原生js實現(xiàn) 原生js實現(xiàn)addclass

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

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

發(fā)表評論

登陸后可評論

0條評論

tanglijun

男|高級講師

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

TA的文章

【黑馬程序員】通訊錄管理系統(tǒng)----個人改良版（附帶程序打包）

閱讀 2491·2021-09-28 09:36
如何識別虛擬主機服務(wù)器-如何知道某個網(wǎng)站用的是虛擬主機還是獨立服務(wù)器？

閱讀 3635·2021-09-22 15:41
智慧園區(qū)三維可視化系統(tǒng)（附方案+源碼）

閱讀 4456·2021-09-04 16:45
css選擇class中的第一個怎么選？使用first-of-type？

閱讀 2087·2019-08-30 15:55
css居中辦法學(xué)習(xí)筆記

閱讀 2875·2019-08-30 13:49
CSS魔法堂：稍稍深入偽類選擇器

閱讀 852·2019-08-29 16:34
彈性布局實現(xiàn)滑動內(nèi)容放大，且放大部分不會被隱藏掉

閱讀 2410·2019-08-29 12:57
瀏覽器的Event Loop

閱讀 1706·2019-08-26 18:42

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

資訊專欄INFORMATION COLUMN

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

原生js實現(xiàn)on與off 方法

相關(guān)文章

前端培訓(xùn)-中級階段（6）- jQuery的事件綁定鏈?zhǔn)讲僮骷霸恚?019-07-25期）

前端培訓(xùn)-中級階段（6）- jQuery的事件綁定鏈?zhǔn)讲僮骷霸恚?019-07-25期）

jQuery 事件(三) 事件的綁定和解綁、對象的使用、自定義事件

瀑布流插件Masonry中文文檔【翻譯】

原生JS實現(xiàn)粘貼到剪貼板

發(fā)表評論

0條評論

tanglijun

男|高級講師

TA的文章

【黑馬程序員】通訊錄管理系統(tǒng)----個人改良版（附帶程序打包）

如何識別虛擬主機服務(wù)器-如何知道某個網(wǎng)站用的是虛擬主機還是獨立服務(wù)器？

智慧園區(qū)三維可視化系統(tǒng)（附方案+源碼）

css選擇class中的第一個怎么選？使用first-of-type？

css居中辦法學(xué)習(xí)筆記

CSS魔法堂：稍稍深入偽類選擇器

彈性布局實現(xiàn)滑動內(nèi)容放大，且放大部分不會被隱藏掉

瀏覽器的Event Loop

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

原生js實現(xiàn)on與off 方法

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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