只執(zhí)行一次的事件綁定函數(shù)

Kahn 發(fā)布于2019-08-22 17:19 / 3391人閱讀

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

概覽

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

定義事件處理函數(shù)，比如點擊事件處理函數(shù)

點擊元素執(zhí)行事件處理函數(shù)

移除事件處理函數(shù)。

原生JavaScript事件綁定

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

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

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

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

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

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

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

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

Jquery事件綁定

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

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

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

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

Vue事件綁定

Vue中的通過修飾符once實現(xiàn)只觸發(fā)一次事件處理程序的方式：

完。

已同步到個人博客只執(zhí)行一次的事件綁定函數(shù)

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

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

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

# 實現(xiàn)一套自定義事件機制

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

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

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

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

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

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

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

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

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

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