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

2024年5月11日 179次阅读 来源: Felix

概览

在前端开发中，有时会希望事件只被调用一次。比如，点击一张缩略图加载视频文件或点击“更多”图标通过AJAX展示额外的内容。
当多次点击的时候，事件处理函数会被调用多次，这会造成浏览器多次加载不必要的资源。更坏的情况可能会导致无法预期的事情发生。
庆幸的是，使用JavaScript可以很容易的实现只绑定一次的事件。步骤如下：

  1. 定义事件处理函数，比如点击事件处理函数
  2. 点击元素执行事件处理函数
  3. 移除事件处理函数。

原生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实现只触发一次事件处理程序的方式：

<button v-on:click.once="doThis"></button>

完。

已同步到个人博客
只执行一次的事件绑定函数

    原文作者：Felix
    原文地址: https://segmentfault.com/a/1190000014900491
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞