成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Kahn / 3334人閱讀

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

概覽

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

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

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

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

原生JavaScript事件綁定

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

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標(biāo)準(zhǔn)提供一個(gè)事件綁定方法addEventListener，我們先來(lái)看看這個(gè)方法的API：

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

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

var buttonEl = document.getElementById("w3c");
buttonEl.addEventListener("click", function (e) {
    console.log("W3C標(biāo)準(zhǔn)事件");
},{once: true});
Jquery事件綁定

jQuery提供了一個(gè)one()方法實(shí)現(xiàn)只綁定一次的事件。更多使用方法請(qǐng)參考o(jì)ne()方法文檔。

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

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

one: function (types, selector, data, fn) {
    return on(this, types, selector, data, fn, 1);
}
Vue事件綁定

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

完。

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95061.html

相關(guān)文章

  • # 實(shí)現(xiàn)一套自定義事件機(jī)制

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

    hzx 評(píng)論0 收藏0

  • [Javascript實(shí)驗(yàn)課]循環(huán)中的閉包

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

    teren 評(píng)論0 收藏0

  • jQuery入門筆記之（三）事件詳解

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

    GitCafe 評(píng)論0 收藏0

  • 剖析前端開發(fā)中的防抖和節(jié)流

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

    andong777 評(píng)論0 收藏0

  • 剖析前端開發(fā)中的防抖和節(jié)流

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

    LeexMuller 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<