这比@FelixKling的答案明显改进了,改进之处如下:
(1) 对齐了MDN文档中引用的类型、侦听器和useCapture
(2) 删除了老式的IIFE并采用基于类的方法
(3) 添加了addEventListenerById
方法,支持使用自定义ID(避免从返回值中检索ID的需要)
(4) removeEventListener
方法返回已删除的侦听器的ID或null
(5) 添加了length
方法以返回活动监听器的数量
(6) 添加了SO代码段(以证明它可以工作)
代码如下:
class Listeners {
#listeners = {}
#idx = 1
addEventListener(element, type, listener, useCapture = false) {
this.#privateAddEventListener(element, this.#idx, type, listener, useCapture)
return this.#idx++
}
addEventListenerById(element, id, type, listener, useCapture = false) {
this.#privateAddEventListener(element, id, type, listener, useCapture)
return id
}
#privateAddEventListener(element, id, type, listener, useCapture) {
if (this.#listeners[id]) throw Error(`A listener with id ${id} already exists`)
element.addEventListener(type, listener, useCapture)
this.#listeners[id] = {element, type, listener, useCapture}
}
removeEventListener(id) {
const listen = this.#listeners[id]
if (listen) {
listen.element.removeEventListener(listen.type, listen.listener, listen.useCapture)
delete this.#listeners[id]
}
return !!listen ? id : null
}
length() {
return Object.keys(this.#listeners).length
}
}
const testBtn = document.querySelector('.test-button')
const listeners = new Listeners()
const listener1 = listeners.addEventListener(testBtn, 'click', e => console.log('hello from click listener #1', e.offsetX, e.offsetY))
const listener2 = listeners.addEventListener(testBtn, 'click', e => console.log('hello from click listener #2', e.offsetX, e.offsetY))
listeners.addEventListenerById(testBtn, 'listener-id', 'click', e => console.log('hello from click listener #listener-id', e.offsetX, e.offsetY))
const onRemoveClick = (id) => {
const removed = listeners.removeEventListener(id)
if (removed == null) {
console.log(`cannot remove listener #${id} (does not exist)`)
} else {
console.log(`ID of removed listener #${removed}`)
}
const listenersCount = listeners.length()
console.log(`there are ${listenersCount} listeners still listening`)
}
.test-button {
width: 35%;
height: 40px;
float: left;
}
.remove-listener-button {
width: 15%;
height: 40px;
float: left;
}
<button class="test-button">click to prove multiple listeners are listening to my click</button>
<button class="remove-listener-button" onclick="onRemoveClick(1)">remove listener #1</button>
<button class="remove-listener-button" onclick="onRemoveClick(2)">remove listener #2</button>
<button class="remove-listener-button" onclick="onRemoveClick('listener-id')">remove #listener-id</button>
适用于 TypeScript 爱好者
以下是对以上 JavaScript 版本进行了一些增强后的 TypeScript 代码:
(1) removeEventListener
方法返回已删除侦听器的详细信息 (包括 ID),而不仅仅是已删除侦听器的 ID
(2) 添加了 ids
方法,该方法返回所有活动侦听器的 ID
(3) 添加了三种方法 addEventListeners
、addEventListenersByIds
和 removeEventListeners
,允许您在一个调用中添加 / 删除多个侦听器 (请参见下面的使用示例)
(4) 添加了 removeAllEventListeners
和 destroy
方法进行清理 (实质上这两个方法相同,但后者不返回任何值)
以下是 TypeScript 代码 (只需将其复制并粘贴到新的 .ts 文件中即可):
interface IInternalListener {
element: HTMLElement
id: string
type: string
listener: EventListenerOrEventListenerObject
useCapture: boolean
}
export interface IListener extends Omit<IInternalListener, 'id'> {
id: string | number
}
class Listeners {
#listeners: { [key: string]: IInternalListener } = {}
#idx = 1
addEventListener(element: HTMLElement, type: string, listener: EventListenerOrEventListenerObject, useCapture = false): number {
this.#privateAddEventListener(element, this.#idx.toString(), type, listener, useCapture)
return this.#idx++
}
addEventListeners(element: HTMLElement, types: string[], listener: EventListenerOrEventListenerObject, useCapture = false): number[] {
const returnIds: number[] = []
types.forEach((type: string) => {
const returnId: number = this.addEventListener(element, type, listener, useCapture)
returnIds.push(returnId)
})
return returnIds
}
addEventListenerById(element: HTMLElement, id: string | number, type: string, listener: EventListenerOrEventListenerObject, useCapture = false): string | number {
return this.#privateAddEventListener(element, id.toString(), type, listener, useCapture)
}
addEventListenersByIds(element: HTMLElement, ids: Array<string | number>, types: string[], listener: EventListenerOrEventListenerObject, useCapture = false): Array<string | number> {
const returnIds: Array<string | number> = []
if (ids.length !== types.length) throw Error(`Cannot add ${types.length} event listeners using ${ids.length} ids - ids and types must be of equal length`)
types.forEach((type: string, idx: number) => {
const id: string | number = ids[idx]
const returnId: string | number = this.addEventListenerById(element, id, type, listener, useCapture)
returnIds.push(returnId)
})
return returnIds
}
removeEventListener(id: string | number): IListener | null {
const strId: string = id.toString()
const internalListener: IInternalListener = this.#listeners[strId]
if (internalListener) {
internalListener.element.removeEventListener(internalListener.type, internalListener.listener, internalListener.useCapture)
const listener: IListener = this.#privateGetListener(internalListener)
delete this.#listeners[strId]
return listener
}
return null
}
removeEventListeners(ids: Array<string | number>): Array<IListener | null> {
const returnListeners: Array<IListener | null> = []
ids.forEach((id: string | number) => {
const returnListener: IListener | null = this.removeEventListener(id)
returnListeners.push(returnListener)
})
return returnListeners
}
removeAllEventListeners(): Array<IListener | null> {
const ids: Array<string | number> = this.ids()
const returnListeners: Array<IListener | null> = this.removeEventListeners(ids)
this.#idx = 1
return returnListeners
}
destroy(): void {
this.removeAllEventListeners()
}
ids(): Array<string | number> {
const ids: string[] = Object.keys(this.#listeners)
return ids.map(id => this.#privateExternalId(id))
}
length(): number {
return Object.keys(this.#listeners).length
}
#privateAddEventListener(element: HTMLElement, id: string, type: string, listener: EventListenerOrEventListenerObject, useCapture: boolean): string | number {
if (this.#listeners[id]) throw Error(`A listener with id ${id} already exists`)
element.addEventListener(type, listener, useCapture)
this.#listeners[id] = { id, element, type, listener, useCapture }
return this.#privateExternalId(id)
}
#privateGetListener(listener: IInternalListener): IListener {
return {
...listener,
id: this.#privateExternalId(listener.id)
}
}
#privateExternalId(id: string): string | number {
const idIsInteger = /^\d+$/.test(id)
if (idIsInteger) return parseInt(id, 10)
return id
}
}
export const listeners: Listeners = new Listeners()
以及 TypeScript 的使用:
import { listeners, IListener } from './your-path/listeners'
const listenerId: number = listeners.addEventListener(mainVideo, 'timeupdate', (evt: Event) => console.log('hi', evt))
listeners.removeEventListener(listenerId)
listeners.addEventListenerById(mainVideo, 'custom-id', 'timeupdate', (evt: Event) => console.log('hello', evt))
listeners.removeEventListener('custom-id')
console.log(listeners.ids())
console.log(listeners.length())
listeners.addEventListenerById(mainVideo, 'fred', 'timeupdate', (evt: Event) => console.log('bye', evt))
const removedListener: IListener | null = listeners.removeEventListener('fred')
console.log('removed listener was', removedListener)
const removedListeners: Array<IListener | null> = listeners.removeAllEventListeners()
console.log('removed listeners were', removedListeners)
listeners.destroy()
高级TypeScript用法,可在一次调用中添加/删除多个监听器:
const listenerIds: number[] = listeners.addEventListeners(this.video, ['timeupdate', 'seeking', 'pause', 'play', 'playing'], (evt: Event) => {
const target = evt.target as HTMLVideoElement
this.currentTime = target.currentTime
})
console.log(listenerIds)
listeners.addEventListenersByIds(this.video, ['id-one', 'id-two', 'id-three'], ['timeupdate', 'seeking', 'pause'], (evt: Event) => {
console.log(evt)
})
const removedListeners: Array<IListener | null> = listeners.removeEventListeners([...listenerIds, 'id-two'])
console.log(removedListeners)