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

概述

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

通常方法

先来回顾一下通常方法：

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 });