事件綁定機(jī)制簡單實(shí)現(xiàn)

wenzi 發(fā)布于2019-08-19 17:45 / 3420人閱讀

原理：

維護(hù)一個(gè)事件數(shù)組

通過apply調(diào)用

var slice = [].slice;

/*
* event control class
* @param {context}
*/

function Event(ctx){
    this._ctx = ctx || this;
    this._events = {};
}

var EventProto = Event.prototype;

/*
* bind a event
* @param {event} eventType
* @param {fn} function
*/
EventProto.on = function(event, fn){
    this._events[event] = this._events[event] || [];
    this._events[event].push(fn);

    return this;
}

/*
* bind an event but only called one time
* @param {event} eventType
* @param {fn} function
*/
EventProto.once = function(event, fn){
    var self = this;

    //when fn is called, remove all event listener
    function fnWrap(){
        self.off(event, fnWrap);
        fn.apply(this, arguments);
    }

    //to specifiy remove method
    fnWrap.fn = fn;
    this.on(event, fnWrap);
    return this;
}


/*
* unbind an event  
* @param {event} eventType
* @param {fn} function
*/

EventProto.off = function(event, fn){
    //remove all events
    if(!arguments){
        this._events = {};
        return this;
    }

    //there are not fn binded
    var events = this._events[event];
    if(!events) return this;

    //remove an type events
    if(arguments.length === 1 && typeof event === "string"){
        delete this._events[event];
        return this;
    }

    //remove fn
    var handler;
    for(var i = 0; i < events.length; i++){
        handler = events[i];
        if(handler === fn || handler.fn === fn){
            events.splice(i, 1);
            break;
        }
    }
    return this;
}

/*
* emit
* @param {event}
* @param {fn param}
*/
EventProto.emit = function(event){
    var events = this._events[event],
        args;
    if(events){
        events = events.slice(0);
        args = slice.call(arguments, 1);
        events.forEach(function(event){
            event.apply(this._ctx, args);
        })
    }
    return this;
}

GPU云服務(wù)器云服務(wù)器 js實(shí)現(xiàn)事件綁定事件機(jī)制事件冒泡機(jī)制事件注冊機(jī)制

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

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

相關(guān)文章

# 實(shí)現(xiàn)一套自定義事件機(jī)制

摘要：因此事件觸發(fā)時(shí)，事件處理函數(shù)的實(shí)參中必須包含當(dāng)前事件的基本信息。事件取消事件取消中需要做的就是已經(jīng)綁定的事件處理函數(shù)移除掉即可。事件機(jī)制為我們的web開發(fā)提供了極大的方便，使得我們能在任意時(shí)候指定在什么操作時(shí)做什么操作、執(zhí)行什么樣的代碼。如點(diǎn)擊事件，用戶點(diǎn)擊時(shí)觸發(fā)；keydown、keyup事件，鍵盤按下、鍵盤彈起時(shí)觸發(fā)；還有上傳控件中，文件加入前事件，上傳完成后事件。由于在恰當(dāng)...

hzx 2019-08-21 17:18 評論0 收藏0
淺談事件委托機(jī)制

摘要：所謂的事件委托，簡單的來說就是將一個(gè)元素響應(yīng)事件委托給另外一個(gè)元素。而正好瀏覽器當(dāng)中有事件冒泡機(jī)制，一張圖簡單了解下瀏覽器的事件響應(yīng)機(jī)制。適用場景在日常開發(fā)過程中，我們經(jīng)常會遇到這樣一種場景：我需要通過ajax從后端獲取數(shù)據(jù)后動(dòng)態(tài)添加dom節(jié)點(diǎn)來展示數(shù)據(jù)，并且這些dom節(jié)點(diǎn)有時(shí)候又需要是可交互的，例如點(diǎn)擊事件。那么在我們獲取到數(shù)據(jù)之前這些dom節(jié)點(diǎn)是不存在的，也就是說我們沒辦法在獲...

WelliJhon 2019-08-22 15:14 評論0 收藏0
淺談React事件機(jī)制

摘要：事件簡介事件是合成事件，所有事件都自動(dòng)綁定到最外層上。支持事件的冒泡機(jī)制，我們可以使用和來中斷它。這樣做簡化了事件處理和回收機(jī)制，效率也有很大提升。事件類型合成事件的事件類型是原生事件類型的一個(gè)子集。 React事件簡介 React事件是合成事件，所有事件都自動(dòng)綁定到最外層上。因?yàn)閂irtual DOM 在內(nèi)存中是以對象的形式存在的，所以React 基于 Virtual DOM 實(shí)現(xiàn)了...

moven_j 2019-08-02 15:29 評論0 收藏0
淺談React事件機(jī)制

摘要：事件簡介事件是合成事件，所有事件都自動(dòng)綁定到最外層上。支持事件的冒泡機(jī)制，我們可以使用和來中斷它。這樣做簡化了事件處理和回收機(jī)制，效率也有很大提升。事件類型合成事件的事件類型是原生事件類型的一個(gè)子集。 React事件簡介 React事件是合成事件，所有事件都自動(dòng)綁定到最外層上。因?yàn)閂irtual DOM 在內(nèi)存中是以對象的形式存在的，所以React 基于 Virtual DOM 實(shí)現(xiàn)了...

MyFaith 2019-08-23 18:36 評論0 收藏0
談?wù)凴eact事件機(jī)制和未來(react-events)

摘要：另外第三方也可以通過的事件插件機(jī)制來合成自定義事件，盡管很少人這么做。抽象跨平臺事件機(jī)制。打算干預(yù)事件的分發(fā)。事件是的一個(gè)自定義事件，旨在規(guī)范化表單元素的變動(dòng)事件。 showImg(https://segmentfault.com/img/remote/1460000019961124?w=713&h=307); 當(dāng)我們在組件上設(shè)置事件處理器時(shí)，React并不會在該DOM元素上直接綁定...

TNFE 2019-08-26 10:32 評論0 收藏0