油候脚本重构addEventListener()、removeEventListener()、getEventListener()等函数

说明：

addEventListener() 方法用于向指定元素添加监听事件。且同一元素目标可重复添加，不会覆盖之前相同事件，配合 removeEventListener() 方法来移除事件。

我们知道原生js的removeEventListener() 方法是无法移除匿名函数事件，因为某些原因又不想添加第三方的js库来实现，我们可以自己重构addEventListener()、removeEventListener()等方法来实现移除匿名函数的事件，重构代码如下：

1.  
   (function () {
2.  
   'use strict';
3.  
    
4.  
   // 在覆盖原始方法之前保存它们
5.  
   Element.prototype._addEventListener = Element.prototype.addEventListener;
6.  
   Element.prototype._removeEventListener = Element.prototype.removeEventListener;
7.  
    
8.  
   /**
9.  
   * 添加事件监听
10.  
    * @param {[type]} type [事件类型，如：click]
11.  
    * @param {[type]} listener [执行函数]
12.  
    * @param {Boolean} useCapture [触发类型，true=事件在捕获阶段执行，false=冒泡阶段]
13.  
    * @param {string} notes 可空，备记文本，用于备记事件的说明，方便用于区分相同的事件、函数属于什么功能
14.  
    */
15.  
    Element.prototype.addEventListener = function (type, listener, useCapture = false, notes) {
16.  
    // 申明事件监听器
17.  
    this._addEventListener(type, listener, useCapture);
18.  
     
19.  
    if (!this.eventListenerList) this.eventListenerList = {};
20.  
    if (!this.eventListenerList[type]) this.eventListenerList[type] = [];
21.  
     
22.  
    // 将侦听器添加到事件跟踪列表
23.  
    this.eventListenerList[type].push({ type, listener, useCapture, notes });
24.  
    };
25.  
     
26.  
    /**
27.  
    * 移除事件监听器
28.  
    * @param {[type]} type [事件类型，如：click]
29.  
    * @param {[type]} listener [执行函数]
30.  
    * @param {Boolean} useCapture [触发类型]
31.  
    * @return {[type]} [description]
32.  
    */
33.  
    Element.prototype.removeEventListener = function (type, listener, useCapture = false) {
34.  
    // 移除监听器
35.  
     
36.  
    this._removeEventListener(type, listener, useCapture);
37.  
     
38.  
    if (!this.eventListenerList) this.eventListenerList = {};
39.  
    if (!this.eventListenerList[type]) this.eventListenerList[type] = [];
40.  
     
41.  
    // 在列表中查找事件，如果侦听器注册了两次，则有捕获和无捕获，分别移除每一个。
42.  
     
43.  
    for (let i = 0; i < this.eventListenerList[type].length; i++) {
44.  
    if (this.eventListenerList[type][i].listener === listener && this.eventListenerList[type][i].useCapture === useCapture) {
45.  
    this.eventListenerList[type].splice(i, 1);
46.  
    break;
47.  
    }
48.  
    }
49.  
    // 如果不再保留已删除事件类型的事件，则删除该组
50.  
    if (this.eventListenerList[type].length == 0) delete this.eventListenerList[type];
51.  
    };
52.  
     
53.  
     
54.  
    /**
55.  
    * [获取事件监听]
56.  
    * @param {[type]} type [事件类型]
57.  
    * @return {[type]} [返回目标所有事件]
58.  
    */
59.  
    Element.prototype.getEventListeners = function (type) {
60.  
    if (!this.eventListenerList) this.eventListenerList = {};
61.  
     
62.  
    // 返回所需的侦听器类型或所有侦听器
63.  
    if (type === undefined) return this.eventListenerList;
64.  
    return this.eventListenerList[type];
65.  
    };
66.  
     
67.  
    })();

这样我们就重构好了事件监听器，并额外添加了getEventListeners()方法，就可以取出所有的监听事件，从已监听的事件列表中找出对应的事件使用removeEventListener进行删除即可，即使是匿名事件也可以，原生的移除方法不支持匿名的原因是我们的无法提供的添加时的匿名事件，尽管我们提供的匿名函数名称一样但是内存里的指向是不同的函数地址，现在我们就完美的解决了。

备记方法移除事件例子：

1.  
   // 获取目标元素的所有监听事件，这里以click事件为例
2.  
   let eventTarget = elem.getEventListeners().click
3.  
   // 如果事件对象不为未定义，就表示已经添加过click事件
4.  
   if (eventTarget != undefined) {
5.  
   // 倒叙循环 获取事件对象里有指定备记的事件
6.  
   for (let i = eventTarget.length - 1; i >= 0; i--) {
7.  
   if (eventTarget[i].notes === notes) {
8.  
   // 移除事件 使用事件列表里记录的事件函数
9.  
   elem.removeEventListener('click', eventTarget[i].listener)
10.  
    }
11.  
    }
12.  
    }

直接移除事件例子：

1.  
   // 获取目标元素的所有监听事件，这里以click事件为例
2.  
   let eventTarget = elem.getEventListeners().click
3.  
   // 如果事件对象不为未定义，就表示已经添加过click事件
4.  
   if (eventTarget != undefined) {
5.  
   // 删除第一个事件（无论是否匿名事件）
6.  
   elem.removeEventListener('click', eventTarget[0].listener)
7.  
   }

写法于原生js的事件监听写法一致，其中addEventListener()方法比原生方法多了一个notes参数