简单的事件处理类Event

简介: class Event{ constructor(){ this.handlers=[] } on(type,fn){ //订阅事件 if(!this.
class Event{
    constructor(){
        this.handlers=[]
    }
    on(type,fn){  //订阅事件  
        if(!this.handlers[type]){
            this.handlers[type] = [];
        }
        this.handlers[type].push({handle:fn,one:false});
    }
    one(type,option={},fn){ //订阅只执行一次的事件
        if(!this.handlers[type]){
            this.handlers[type] = [];
        }
        this.handlers[type].push({handle:fn,one:true});
    }
    emit(type,option,fn){ //发布某类事件或者某个事件,fn存在时候只执行订阅过的fn事件
        var handlers = this.handlers[type]
        for (var i=0, len=handlers.length; i < len; i++){
            if(fn){
                if(handlers[i].handle === fn){
                    handlers[i].handle(option)
                    if(handlers[i].one){
                        handlers.splice(i, 1);
                    }
                    break;
                }
            }else {
                handlers[i].handle(option)
                if(handlers[i].one){
                    handlers.splice(i, 1);
                }
            }

        }
    }
    remove(type,fn){  //移除某类事件或者某个事件,fn存在即移除该事件
        var handlers = this.handlers[type]
        if(fn){
            for (var i=0, len=handlers.length; i < len; i++){
                if(handlers[i] === fn){
                    handlers.splice(i, 1);
                    break;
                }
            }
        }else {
            delete this.handlers[type];
        }
    }
}
export default new Event();

  

相关文章
|
14天前
|
JavaScript 前端开发 编译器
方法事件处理器
方法事件处理器
|
1月前
|
JavaScript 前端开发
qml 信号和处理程序事件系统(Signal and Handler Event System)
qml 信号和处理程序事件系统(Signal and Handler Event System)
18 0
事件对象(event)
1.event 就是一个事件对象,写到侦听函数的小括号里,当作形参来看。 2.事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数。 3.事件对象是我们事件的一系列跟事件相关的数据的集合。比如鼠标点击事件里面就包含了鼠标的相关信息,如鼠标的坐标,如果是键盘事件里面就包含的是键盘事件的信息,如判断用户按下哪个按键。
|
JavaScript 前端开发
详细解析DOM事件的event事件对象(二)
详细解析DOM事件的event事件对象(二) 上篇博客说到了DOM的键盘事件和鼠标事件的event对象,这次我们再来聊一聊event对象剩下的属性。 HTML代码: &lt;div class=&quot;box&quot;&gt;1&lt;/div&gt; &lt;div class=&quot;box&quot;&gt;2&lt;/div&gt; &lt;div class=&quot;box&quot;&gt;3&lt;/div&gt; &lt;div class=&quot;box&quot;&gt;4&lt;/div&gt; &lt;div class=&quot;box&quot;&gt;5&lt;/div&gt; 1 2 3 4 5 CSS代码: *{ margin: 0;
|
JavaScript 前端开发
详细解析DOM事件的event事件对象(一)
JavaScript 86 篇文章 7 订阅 订阅专栏 详细解析DOM事件的event事件对象(一) 近期我们一直在学习DOM,马上到了尾期了,今天来说一下DOM事件的event事件对象。这里我们先解析一下键盘和鼠标事件的event对象属性。 HTML代码: &lt;form&gt; &lt;input type=&quot;text&quot; id=&quot;text&quot;&gt; &lt;!-- &lt;input type=&quot;submit&quot;&gt; --&gt; &lt;button&gt;登录&lt;/button&gt; &lt;/form&gt; 1 2 3 4 5 1.键盘事件
|
C#
C# 事件(Event)
C# 事件(Event) 事件(Event) 基本上说是一个用户操作,如按键、点击、鼠标移动等等,或者是一些提示信息,如系统生成的通知。应用程序需要在事件发生时响应事件。例如,中断。 C# 中使用事件机制实现线程间的通信
151 0
|
JavaScript
48、Event 对象
事件发生以后,会产生一个事件对象,作为参数传给监听函数。浏览器原生提供一个Event对象,所有的事件都是这个对象的实例,或者说继承了Event.prototype对象。
84 0
|
C++
C++ 事件(event)使用总结
C++ 事件(event)使用总结
1202 0
C++ 事件(event)使用总结