只執行一次的事件綁定函數

概覽

在前端開發中，有時會但願事件只被調用一次。好比，點擊一張縮略圖加載視頻文件或點擊「更多」圖標經過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>