只执行一次的事件绑定函数

Kahn 发布于2019-08-22 17:19 / 3299人阅读

摘要：原生事件绑定所谓的移除事件处理函数指的是对于给定的元素和事件类型，处理程序在第一次触发事件后会被立即解除绑定。如果为表示事件执行之后会自动移除绑定。标准事件事件绑定提供了一个方法实现只绑定一次的事件。已同步到个人博客只执行一次的事件绑定函数

概览

在前端开发中，有时会希望事件只被调用一次。比如，点击一张缩略图加载视频文件或点击“更多”图标通过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函数只执行一次代码只执行一次最近一次的登录时间只显示一次

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

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