只綁定一次的JavaScript事件

前言

在前端開發中，有時會希望事件只被調用一次。比如，點擊一張縮略圖加載視頻文件或點擊“更多”圖標通過AJAX展示額外的內容。
當多次點擊的時候，事件處理函數會被調用多次，這會造成瀏覽器多次加載不必要的資源。更壞的情況可能會導致無法預期的事情發生。
慶幸的是，使用JavaScript可以很容易的實現只綁定一次的事件。步驟如下：

1. 定義事件處理函數，比如點擊事件處理函數
2. 點擊元素執行事件處理函數
3. 移除事件處理函數。

原生JavaScript事件綁定

所謂的移除事件處理函數指的是對於給定的元素和事件類型，處理程序在第一次觸發事件后會被立即解除綁定。直接上代碼：

function once(type, selector, callback) {
    selector.addEventListener(type, function fn(e) {
        e.target.removeEventListener(e.type, fn);
        return callback(e);
    }, false);
}

現在就可以使用once()方法只讓事件執行一次了：

once('click', buttonElement, function () {
    console.log('executed only once.');
});

除此之外，W3C標准提供一個事件綁定方法addEventListener，我們先來看看這個方法的API：

target.addEventListener(type, listener[, options])

其中，options對象提供一個once屬性來指定事件綁定的次數，bool值。如果為true表示事件執行之后會自動移除綁定。

var buttonEl = document.getElementById('w3c');
buttonEl.addEventListener('click', function (e) {
    console.log('W3C標准事件');
},{once: true});

Jquery事件綁定

jQuery提供了一個one()方法實現只綁定一次的事件。更多使用方法請參考one()方法文檔。

$("#foo").one("click", function() {
    console.log("Event fired once!!!");
});

one()其實是調用了on()方法，通過參數控制事件綁定的次數。所以如果想要了解jQuery如何實現事件綁定，請看on()方法的實現。

one: function (types, selector, data, fn) {
    return on(this, types, selector, data, fn, 1);
}

Vue事件綁定

Vue中的通過修飾符once實現只觸發一次事件處理程序的方式：

<button v-on:click.once="doThis"></button>