自定义事件 js

Posted 2020-10-23 吃个石头

// 原理如下
// 创建 类型为htmlEvents的事件
var evt = document.createEvent("HTMLEvents");
// 初始化 自定义eee 事件
evt.initEvent("eee", false, false);

// 事件绑定
document.addEventListener("eee", function(e) {
  console.log(e)
})

// document标签触发事件（直接运行代码触发）

document.dispatchEvent(evt);

这儿无法传参，再做一个封装。

    class EventEmitter {
        constructor() {
            this.evt = document.createEvent("HTMLEvents")

        }
        on(type, fn) {
            this.evt.initEvent(type, false, false);
            document.addEventListener(type, () => {
                fn(this.data)
            }, false)
        }
        emit(type, data) {
            this.data = data
            document.dispatchEvent(this.evt)
        }
    }
    const evt = new EventEmitter()
    evt.on(‘abc‘, (data) => {
        console.log(data) // {a: 1}
    })
    evt.emit(‘abc‘, { a: 1 })

 还有问题， 没法绑定多个事件，这只要做一个map记录就行了

// 如下   
 class EventEmitter {

        constructor() {
            // 统计事件map
            this.evts = new Map
        }
        // 注册事件
        on(type, fn) {
            let evt = document.createEvent("HTMLEvents")
            evt.initEvent(type, false, false)

            this.evts.set(type, { evt, fn })

            document.addEventListener(type, () => fn(this.data), false)
        }
        // 触发事件
        emit(type, data) {
            if (!this.evts.has(type)) {
                return false
            }

            this.data = data

            document.dispatchEvent(this.evts.get(type).evt)
        }
        // 删除事件
        remove(type) {
            document.removeEventListener(type, this.evts.get(type).fn, false)
            this.evts.delete(type)
        }
    }
    const evt = new EventEmitter()
    evt.on(‘abc‘, (data) => {
        console.log(‘abc‘, data)
    })
    evt.on(‘aaa‘, (data) => {
        console.log(‘aaa‘, data)
    })
    evt.emit(‘aaa‘, { aaa: 1 }) // aaa {aaa: 1}
    evt.emit(‘abc‘, { a: 1 })  //abc {a: 1}  
    evt.emit(‘abc‘, { ddf: 1 }) //abc { ddf: 1 }

　　　evt.emit(‘ffg‘, { ddd: 1 })  // 无打印
 　　evt.remove(‘abc‘)  // 删除
　　　evt.emit(‘abc‘, 111) // 无打印