只绑定一次事件的简单方法

概述

今天我无意中看到了只执行一次事件的简便方法，记录下来，供以后工作时参考，相信对其他人也有用。

一般方法

先来回顾一下一般方法：

const $once = function (target, event, fn) {
    const that = this;

    function newFn (...args) {
        target.removeEventListener(event, newFn);
        fn.apply(that, ...args);
    }

    target.addEventListener(event, newFn);
}

简便方法

其实 addEventListener 的第三个参数不仅仅有 useCapture（bool值），还可能是一个 options（对象），options 的各属性解释如下：

capture: 默认值为false，是否使用事件捕获
once: 默认值为false，是否只调用一次，是的话会在调用后自动销毁 listener
passive: 默认值为false，是否永远不调用 preventDefault 方法。在某些浏览器上面，为了保证滚动性能，会针对 touchstart 和 touchmove 事件将默认值设置为 true

所以只需要使用 once 属性即可：

target.addEventListener(event, fn, { once: true });