自定義事件 js
阿新 • • 發佈:2018-02-06
function event 代碼 delete eve 統計 ini aaa 觸發事件
// 原理如下
// 創建 類型為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 = newMap } // 註冊事件 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) // 無打印
自定義事件 js