只绑定一次的JavaScript事件

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

除此之外，addEventListener方法提供了一个options对象以此来指定事件执行的次数。其中options的once属性为true表示事件执行之后会自动的移除绑定的事件。

var buttonEl = document.getElementById('w3c');
buttonEl.addEventListener('click', function (e) {
  console.log('W3C标准事件');
},{ once: true });

最后，如果是Vue的话，通过Vue提供的事件修饰符可以更方便的实现事件只绑定一次：