如何取消事件监听

removeEventListener

removeEventListener()  方法可以删除使用 EventTarget.addEventListener()方法添加的事件。

const fn=(e)=>{
    console.log(e)
}
window.addEventListener('click', fn);
window.removeEventListener('click', fn);

AbortController

该 AbortController 接口表示一个控制器对象，该对象允许您在需要时中止一个或多个 Web 请求。

我们除了可以借助该对象终止fetch请求，还可以用来终止事件监听

const controller = new AbortController()
window.addEventListener('click',(e)=>{
    console.log(e)
},{
    signal: controller.signal
})
controller.abort()

封装自定义的取消函数

上面两种方法都是原生的，但是如果使用起来还是会有些不方便，每次都需要add，然后再remove，或者创建controller去标记然后调用abort

我希望每次addEventListener后返回一个取消函数，只需要调用就可以停止监听

function createCanAbortListener<K extends EventTypeName>(event: K | K[], callback: (e: WindowEventMap[K]) => any, option?: boolean | AddEventListenerOptions, target?: EventTarget) {
	let _target = target || window
	let listenerOption: AddEventListenerOptions = {}
	if (typeof option === 'boolean') {
		listenerOption.capture = option
	} else {
		listenerOption = option || {}
	}
	const controller = new AbortController()
	if (Array.isArray(event)) {
		event.forEach((item) => {
			_target.addEventListener(
				item,
				(e: any) => {
					callback(e)
				},
				Object.assign(
					{
						signal: controller.signal,
					},
					option
				)
			)
		})
	} else {
		_target.addEventListener(
			event,
			(e: any) => {
				callback(e)
			},
			Object.assign(
				{
					signal: controller.signal,
				},
				option
			)
		)
	}
	return controller.abort
}

我们创建了createCanAbortListener函数，他的接收的参数addEventListener一样,不同的是多了一个可选参数用来绑定window对象以外的事件，然后他会返回一个函数，只需要调用即可取消对这些事件的监听

const abort = createCanAbortListener('click', (e) => {
	// todo something...
})
abort() // 取消监听

同时支持对多个事件创建监听

createCanAbortListener(['click', 'error', 'resize'],fn)

怎么说呢，功能很简单，但是个人感觉有一定实用价值吧，能少写一行代码就少写一行，于是打包发布到了npm

npm：abortlisten - npm --- 中止 - npm (npmjs.com)

github：no-chili/abortlisten: 取消事件监听 (github.com)

各位可以赏脸看看，同时感谢看到这里