事件只绑定一次的实现

young.li 发布于2019-08-22 11:17 / 2670人阅读

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实现事件绑定最近一次的登录时间单击事件选中事件点击事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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