美文网首页
第五节: 内置模块(一):事件模块events

第五节: 内置模块(一):事件模块events

作者: 时光如剑 | 来源:发表于2020-12-15 08:08 被阅读0次

    1.EventEmitter 类

    用于实现各类事件的event模块,所有可能触发事件的对象都是一个继承了EventEmitter类的子类的实例

    通常会直接使用events事件模块下的EventEmitter

    const EventEmitter = require('events').EventEmitter;
    
    // 直接使用EventEmitter类实例
    const myEmitter = new EventEmitter;
    
    // 也可以定义子类继承EventEmitter类
    class CustomEvent extends EventEmitter
    const myevent = new CustomEvent
    
    1.1 EventEmitter类的各种方法
    方法名与参数 描述
    addListener(event,listener) 对指定事件绑定事件处理函数
    on(event,listener) 对指定事件绑定事件处理函数(addListener方法的别名)
    once(event,listener) 对指定事件只执行一次事件处理函数
    removeListener(event,listener) 对指定事件解除事件处理函数
    removeAllListeners([event]) 对指定的事件解除所有的事件处理函数
    setMaxListeners(n) 指定事件处理函数最大数量,n为整数,代表最大的指定事件数量
    listeners(event) 获取指定事件的所有处理函数
    emit(event,[arg1],[arg2],[...]) 手动触发指定事件

    2. EventEmitter类的各类方法

    2.1 绑定事件 addListener on

    addListener 方法 和on 方法 除了方法名不同,本质没有任何区别,内部实现同样的处理

    两个参数

    1. 第一个参数是绑定的事件名
    2. 第二个参数是事件处理函数
    const {EventEmitter} = require("events")
    
    
    // 定义子类
    class Emitter extends EventEmitter{}
    
    // 创建实例
    const emitter  = new Emitter()
    
    // 绑定事件
    emitter.addListener("con", function() {
        console.log("con自定义事件被触发了")
    })
    emitter.on("con", function() {
        console.log("con自定义事件被触发了")
    })
    
    // 触发事件
    emitter.emit('con')
    
    // 事件可以连续触发
    emitter.emit('con')
    emitter.emit('con')
    emitter.emit('con')
    
    2.2 只绑定一次事件 once

    once方法表示事件处理函数只执行一次,执行完毕后自动解除事件绑定

    // 绑定事件
    emitter.once("con", function() {
        console.log(arguments)
        console.log("con自定义事件被触发了")
    })
    
    // 触发事件
    emitter.emit('con')   // 只有第一次触发事件执行,后面的触发事件都不会执行,因为事件被自动解绑了
    emitter.emit('con')
    
    2.3 解除事件绑定 removeListener removeAllListener off

    绑定事件的时候,同一个事件名可以绑定多个事件,

    1. removeListener方法是确定解绑那个事件名的那个执行的事件处理函数,

    接受两个参数,

    1. 第一个参数是指定的事件名
    2. 第二个参数是指定需要解绑的事件处理函数

    因为要确定接触绑定的事件处理函数,所以最好绑定的时候使用有名函数绑定事件

    // 绑定事件
    emitter.on("someevent", fn1)
    emitter.on("someevent", fn2)
    emitter.on("someevent", fn3)
    
    // 事件处理函数
    function fn1() {
        console.log("someevent fn1")
    }
    function fn2() {
        console.log("someevent fn2")
    }
    function fn3() {
        console.log("someevent fn3")
    }
    
    // 触发事件
    setInterval(() => {
        emitter.emit('someevent')
    },1000)
    
    // 2s 后解绑fn2
    setTimeout(() => {
        emitter.removeListener('someevent', fn2)
    },2000)
    
    2. off 方法 解除指定事件名的指定事件处理函数

    用法与removeListener相似接受两个参数

    指定的事件, 指定要解绑的事件处理函数

     emitter.off('someevent', fn2)
    
    3. removeAllListeners 方法解除制定事件名下所有的事件处理函数

    接受一个参数,

    1. 指定的事件名
    // 2s 后解绑someevnt事件名绑定的所有事件处理函数
    setTimeout(() => {
        emitter.removeAllListeners('someevent')
    },2000)
    

    如果removeAllListeners 方法不传参数则表示解绑所有的事件名下的所有的事件处理函数

    2.4 setMaxListeners 方法 用于指定事件处理函数最大绑定个数

    默认情况下同一个事件名最多可以绑定10个事件处理函数, 也可以通过setMaxListeners 修改最多绑定个数

    // 设置最大事件处理函数绑定个数
    emitter.setMaxListeners(12)
    
    // 绑定事件
    emitter.on("someevent", fn1)
    emitter.on("someevent", fn2)
    emitter.on("someevent", fn3)
    emitter.on("someevent", fn4)
    emitter.on("someevent", fn5)
    emitter.on("someevent", fn6)
    emitter.on("someevent", fn7)
    emitter.on("someevent", fn8)
    emitter.on("someevent", fn9)
    emitter.on("someevent", fn10)
    emitter.on("someevent", fn11)
    emitter.on("someevent", fn12)
    
    // 事件处理函数
    // ....
    
    
    // 触发事件
    setInterval(() => {
        emitter.emit('someevent')
    },1000)
    

    注意:

    ​ 如果同一个事件名绑定了超过10个事件处理函数, 会有提示, 程序会依然执行

    ​ 如果设置里事件最大处理函数个数就不会有提示报错

    2.5 getMaxListeners 方法 用来获取最大绑定事件个数

    表示同一个事件可以监听多少次,最大有多少个回调函数.

    默认是10次.

    console.log(emitter.getMaxListeners());
    // 返回 10
    
    2.6 listeners 获取事件名所有绑定事件处理函数

    检测一个事件的所有回调函数

    emitter.listeners('someevent')
    //返回一个数组
    [[function:fn1],[function:fn2]]
    
    2.7 emit 方法触发事件

    emit触发事件,

    参数:

    ​ 第一个参数是必填的就是需要触发的事件名

    ​ 第二个以后的参数都是个事件处理函数传递的实参

    // 普通触发事件
    emitter.emit('someEvents')
    
    
    // 触发事件的时候传递参数
    // 绑定事件
    emitter.on("someevent", function () {
        console.log(arguments)   // 打印结果: [Arguments] { '0': '参数1', '1': '参数2' }
    })
    
    // 触发事件
    emitter.emit('someevent','参数1','参数2')
    

    3. listenerCount 方法获取指定事件的处理函数的个数

    listenerCount是 EventEmitter 类的静态方法

    接受两个参数

    1. 第一个参数是, 绑定事件的实例对象
    2. 第二个参数是绑定的事件名
    // 获取绑定的事件处理函数个数
    EventEmit.listenerCount(emitter, 'someevent')
    

    4. EventEmitter类 自身所拥有的事件

    EventEmitter拥有两个固定的事件,及 newListener 和 removeListener

    4.1 newListener 事件

    所有继承EventEmitter类的子类实例对象绑定事件处理函数时都会触发newListener事件

    emitter.on("newListener", function(eventname, eventfun){
        // newListener 事件处理函数接受两个实参,事件名,事件函数
        console.log("newListener")
    })
    /*
        因为emitter绑定了三个事件处理函数
        所以newListener事件会执行三次
    
    */
    
    // 绑定事件
    emitter.on("someevent", fn1)
    emitter.on("someevent", fn2)
    emitter.on("newevent", fn2)
    
    // 事件处理函数
    function fn1() {
        console.log("someevent fn1")
    }
    function fn2() {
        console.log("someevent fn2")
    }
    
    
    4.2 removeListener 事件

    当对继承EventEmitter 类子类实例对象取消事件处理函数时,会触发removeListener事件

    emitter.on("removeListener", function(eventname, eventfn){
        // 接受两个参数事件名和事件函数
        console.log(arguments)
    })
    
    // 绑定事件
    emitter.on("someevent", fn1)
    emitter.on("someevent", fn2)
    emitter.on("newevent", fn2)
    
    // 事件处理函数
    function fn1() {
        console.log("someevent fn1")
    }
    function fn2() {
        console.log("someevent fn2")
    }
    
    emitter.removeListener("someevent", fn1)  // 每次取消事件绑定都会执行removeListener事件
    

    5. 原型继承

    function Fn(name){
        this.name = name;
    }
    Fn.prototype.__proto__ = EventEmitter.prototype;
    
    const obj = new Fn('大帅哥');
    
    obj.on('fy',function(){
        console.log(this.name);
    })
    
    setTimeout(()=>{
        obj.emit('fy');
    },1000)
    

    相关文章

      网友评论

          本文标题:第五节: 内置模块(一):事件模块events

          本文链接:https://www.haomeiwen.com/subject/prhmgktx.html