聊聊DOM的一次性事件绑定

Posted 2020-11-05 emustan

概览

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

   var buttonElement = document.querySelector(‘#button‘);
   function handler(e) {
   console.log(e.target);
   }
   once(‘click‘, buttonElement, handler);

   Jquery事件绑定

   如果你使用jQuery的话，那就更容易了，它提供了一个one()方法绑定一次性事件。更多使用方法请参考one()方法文档。

   $("#foo").one("click", function() {
   console.log("Event fired once!!!");
   });

   附注：如果你看jQuery的源码的话，你会发现one()其实是调用了on()方法，通过参数控制事件绑定的次数。所以如果想要了解jQuery如何实现事件绑定，需要看on()方法的实现。
   

   W3C事件绑定

   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});