JavaScript 取消事件绑定

一般情况下使用removeEventListener移除事件绑定时, 需要把之前addEventListener传递的函数再传递一次:

function onClick() {
  alert("window");
}
// 绑定事件
window.addEventListener("click", onClick);

// 移除事件
window.removeEventListener("click", onClick);

这种情况下必须要把事件处理函数onClick存放到某个变量上, 下次移除时才能传递给移除事件函数, 给移除掉.

下面介绍一种官方的新方式, 解决移除匿名事件处理函数:

const controller = new AbortController();
window.addEventListener("click", () => alert("window"), { signal: controller.signal });
document.addEventListener("click", () => alert("document"), { signal: controller.signal });

// 批量取消监听
controller.abort();

或者自己实现类似发布订阅模式的时候还有个思路是, 把取消函数返回给调用方:

function addEventListener(element, type, handler, options){
  // 绑定事件
  element.addEventListener(type, handler, options);

  //取消事件绑定
  function removeHandler () {
    element.removeEventListener(type, handler);
  }
  return removeHandler;
}

// 然后就可以这么使用
const cancel = addEventListener(window, "click", () => alert("window"), { signal: controller.signal });
cancel(); // 这就取消了事件绑定

上述解决方案和思路来自问题及其答案: 把addEventListener改成这样或许更好用，是否有什么弊端？