事件只綁定一次的實現

young.li 發布于2019-08-22 11:17 / 2689人閱讀

const one = (element, events, handler) => {
    let executed = false;
    let eventsArray = [];
    if (/array/i.test(Object.prototype.toString.call(events))) {
        eventsArray = events;
    } else {
        eventsArray.push(events);
    }

    // 事件觸發時執行，執行過程中解綁，并改變標記變量executed的狀態
    const onceHanler = e => {
        if (executed) {
            return;
        }

        eventsArray.forEach(eventName => element.removeEventListener(eventName, onceHanler, false));
        handler(e);
        executed = true;
    }

    eventsArray.forEach(eventName => element.addEventListener(eventName, onceHanler, false));
}

one(element, ["animationend", "webkitAnimationEnd", "mozAnimationEnd"], handler);

GPU云服務器云服務器 js實現事件綁定最近一次的登錄時間單擊事件選中事件點擊事件

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

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

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

摘要：原生事件綁定所謂的移除事件處理函數指的是對于給定的元素和事件類型，處理程序在第一次觸發事件后會被立即解除綁定。如果為表示事件執行之后會自動移除綁定。標準事件事件綁定提供了一個方法實現只綁定一次的事件。已同步到個人博客只執行一次的事件綁定函數概覽在前端開發中，有時會希望事件只被調用一次。比如，點擊一張縮略圖加載視頻文件或點擊更多圖標通過AJAX展示額外的內容。當多次點擊的時候，事件處...

Kahn 2019-08-22 17:19 評論0 收藏0
2017-08-02 前端日報

摘要：前端日報精選浮點數精度之謎前端面試必備基本排序算法從賀老微博引出的遍歷器加速那些奧秘進階之深入理解數據雙向綁定全棧天中文深入理解筆記用模塊封裝代碼前端架構經驗分享周二放送自制知乎專欄譯在大型應用中使用的五個技巧掘金開發指南眾成 2017-08-02 前端日報精選 JavaScript 浮點數精度之謎前端面試必備——基本排序算法從賀老微博引出的遍歷器（Iterators）加速那些奧秘J...

Worktile 2019-08-20 18:29 評論0 收藏0
addEvent.js源碼解析

摘要：在看源碼時，發現了這段注釋源碼行的庫為的事件綁定提供了很多想法，我們就來看下年的。五內存泄漏簡單說只綁定一次，只綁定一次。并通過來為每一個定一個，然后依次添加進中，并通過執行如果一直調用來綁定事件的話，內存開銷會很大。最后完整代碼請看完 showImg(https://segmentfault.com/img/remote/1460000019390987); 前言：看兩三遍即可。在...

RaoMeng 2019-08-23 17:57 評論0 收藏0
關于JS中事件代理的解析

摘要：事件代理原理事件代理本質上來說是利用事件冒泡的機制來進行實現的。概述一般來說，我們在為前端頁面設計交互的的時候往往需要為DOM元素添加事件處理程序。但是很多時候頁面的DOM元素的結構和層級會很復雜，如果我們為所有需要添加事件處理的DOM元素一一綁定上事件處理程序，那么不僅編寫出的代碼會很繁雜，整個頁面的性能也會很低下。比如我們有一個有序或者無序的列表，其中包裹了數百個子節點li，一...

KavenFan 2019-08-23 14:17 評論0 收藏0