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

概览

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