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

Kahn 發布于2019-08-22 17:19 / 3330人閱讀

摘要：原生事件綁定所謂的移除事件處理函數指的是對于給定的元素和事件類型，處理程序在第一次觸發事件后會被立即解除綁定。如果為表示事件執行之后會自動移除綁定。標準事件事件綁定提供了一個方法實現只綁定一次的事件。已同步到個人博客只執行一次的事件綁定函數

概覽

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

定義事件處理函數，比如點擊事件處理函數

點擊元素執行事件處理函數

移除事件處理函數。

原生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實現只觸發一次事件處理程序的方式：

完。

已同步到個人博客只執行一次的事件綁定函數

云服務器 GPU云服務器讓js函數只執行一次代碼只執行一次最近一次的登錄時間只顯示一次

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95061.html

# 實現一套自定義事件機制

摘要：因此事件觸發時，事件處理函數的實參中必須包含當前事件的基本信息。事件取消事件取消中需要做的就是已經綁定的事件處理函數移除掉即可。事件機制為我們的web開發提供了極大的方便，使得我們能在任意時候指定在什么操作時做什么操作、執行什么樣的代碼。如點擊事件，用戶點擊時觸發；keydown、keyup事件，鍵盤按下、鍵盤彈起時觸發；還有上傳控件中，文件加入前事件，上傳完成后事件。由于在恰當...

hzx 2019-08-21 17:18 評論0 收藏0
[Javascript實驗課]循環中的閉包

摘要：執行出來的結果是這樣的實驗發現，無論如何都在最后執行，這證實了我們之前遇到的問題，因為在循環結束才執行，所以回調函數調用的取值必然是循環的最后一次。前言 https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide/Closures MDN上描述閉包的章節闡述了一個由于閉包產生的常見錯誤，代碼片段是這樣的 for (var i...

teren 2019-08-22 11:28 評論0 收藏0
jQuery入門筆記之（三）事件詳解

摘要：可以傳遞三個參數表示一個或多個事件類型，比如。表示綁定到指定元素的處理函數。我們稱它為簡寫事件。必須在中，并且使用作為事件觸發元素，不然無效。和表示鼠標移入和移出的時候觸發。按下返回按下返回和分別表示光標激活和丟失，事件觸發時機是當前元素。轉自個人博客在JavaScript 有一個非常重要的功能，就是事件驅動。如果你的網頁需要與用戶進行交互的話，就不可能不用到事件。它在頁面完全加...

GitCafe 2019-08-19 17:17 評論0 收藏0
剖析前端開發中的防抖和節流

摘要：運用防抖和節流可以有效降低代碼的執行頻率，從而解決高頻率事件的頁面卡頓問題。在階段布局，最終確定顯示的位置和大小。在函數中，首先定義了一個空的定時器變量，用來計算時間間隔。還有一點要注意，在中一定要清楚定時器，不然會影響的條件判斷。啥是節流？節流是保證在一段時間內，代碼只執行了一次。這個一段時間內指的是不管用戶操作了幾次，最終僅執行一次。比如說一個按鈕，用戶狂點按鈕，但是如果用節流...

andong777 2019-08-30 15:56 評論0 收藏0
剖析前端開發中的防抖和節流

摘要：運用防抖和節流可以有效降低代碼的執行頻率，從而解決高頻率事件的頁面卡頓問題。在階段布局，最終確定顯示的位置和大小。在函數中，首先定義了一個空的定時器變量，用來計算時間間隔。還有一點要注意，在中一定要清楚定時器，不然會影響的條件判斷。啥是節流？節流是保證在一段時間內，代碼只執行了一次。這個一段時間內指的是不管用戶操作了幾次，最終僅執行一次。比如說一個按鈕，用戶狂點按鈕，但是如果用節流...

LeexMuller 2019-08-26 13:35 評論0 收藏0