admin的文章

JavaScript如何实现只绑定一次的事件

1 条评论 前端开发 JavaScript 事件 admin

前言

在前端开发中,有时会希望事件只被调用一次。比如,点击一张缩略图加载视频文件或点击“更多”图标通过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>