只綁定一次事件的簡單方法

概述

今天我無心中看到了只執行一次事件的簡便方法，記錄下來，供之後工做時參考，相信對其餘人也有用。

通常方法

先來回顧一下通常方法：

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