事件绑定机制简单实现

wenzi 发布于2019-08-19 17:45 / 3385人阅读

原理：

维护一个事件数组

通过apply调用

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云服务器云服务器 js实现事件绑定事件机制事件冒泡机制事件注册机制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78821.html

# 实现一套自定义事件机制

摘要：因此事件触发时，事件处理函数的实参中必须包含当前事件的基本信息。事件取消事件取消中需要做的就是已经绑定的事件处理函数移除掉即可。事件机制为我们的web开发提供了极大的方便，使得我们能在任意时候指定在什么操作时做什么操作、执行什么样的代码。如点击事件，用户点击时触发；keydown、keyup事件，键盘按下、键盘弹起时触发；还有上传控件中，文件加入前事件，上传完成后事件。由于在恰当...

hzx 2019-08-21 17:18 评论0 收藏0
浅谈事件委托机制

摘要：所谓的事件委托，简单的来说就是将一个元素响应事件委托给另外一个元素。而正好浏览器当中有事件冒泡机制，一张图简单了解下浏览器的事件响应机制。适用场景在日常开发过程中，我们经常会遇到这样一种场景：我需要通过ajax从后端获取数据后动态添加dom节点来展示数据，并且这些dom节点有时候又需要是可交互的，例如点击事件。那么在我们获取到数据之前这些dom节点是不存在的，也就是说我们没办法在获...

WelliJhon 2019-08-22 15:14 评论0 收藏0
浅谈React事件机制

摘要：事件简介事件是合成事件，所有事件都自动绑定到最外层上。支持事件的冒泡机制，我们可以使用和来中断它。这样做简化了事件处理和回收机制，效率也有很大提升。事件类型合成事件的事件类型是原生事件类型的一个子集。 React事件简介 React事件是合成事件，所有事件都自动绑定到最外层上。因为Virtual DOM 在内存中是以对象的形式存在的，所以React 基于 Virtual DOM 实现了...

moven_j 2019-08-02 15:29 评论0 收藏0
浅谈React事件机制

摘要：事件简介事件是合成事件，所有事件都自动绑定到最外层上。支持事件的冒泡机制，我们可以使用和来中断它。这样做简化了事件处理和回收机制，效率也有很大提升。事件类型合成事件的事件类型是原生事件类型的一个子集。 React事件简介 React事件是合成事件，所有事件都自动绑定到最外层上。因为Virtual DOM 在内存中是以对象的形式存在的，所以React 基于 Virtual DOM 实现了...

MyFaith 2019-08-23 18:36 评论0 收藏0
谈谈React事件机制和未来(react-events)

摘要：另外第三方也可以通过的事件插件机制来合成自定义事件，尽管很少人这么做。抽象跨平台事件机制。打算干预事件的分发。事件是的一个自定义事件，旨在规范化表单元素的变动事件。 showImg(https://segmentfault.com/img/remote/1460000019961124?w=713&h=307); 当我们在组件上设置事件处理器时，React并不会在该DOM元素上直接绑定...

TNFE 2019-08-26 10:32 评论0 收藏0