Javascript 事件侦听器包装函数-为元素多次绑定事件侦听器

下面是一个元素事件监听器的包装函数，如何处理事件监听器包装函数中的一个元素可以多次绑定的事件监听器。如果事件侦听器被绑定了不止一次，这意味着什么？我刚刚在另一篇文章中听到了这个术语

var evts = (function () {
  'use strict';

  var listeners = [],
      add,
      remove;

  add = function (evt, elem, fn, capture) {
    var callback = function (evt) {      
      fn.call(elem, evt, evt && evt.target ? evt.target : window.event.srcElement);
    };

    listeners.push({
      evt: evt,
      elem: elem,
      fn: fn,
      callback: callback,
      capture, capture,
      removed: false
    });

    if (elem.addEventListener) {
      elem.addEventListener(evt, callback, capture);
    } else if (elem.attachEvent) {
      elem.attachEvent('on' + evt, callback, capture);
    } else {
      elem['on' + evt] = callback;
    }
  };

  remove = function (evt, elem, fn, capture) {

    var callback = function (evt) {      
      fn.call(elem, evt, evt && evt.target ? evt.target : window.event.srcElement);
    };

    callback();

    listeners.forEach(function (obj, i) {
      if (obj.evt === evt && obj.elem === elem && 
          !obj.removed) {
        obj.removed = true;
        callback = obj.callback;
        listeners.splice(i, 1);
      }
    });

    if (elem.removeEventListener) {
      elem.removeEventListener(evt, callback, capture);
    } else if (elem.detachEvent) {
      elem.detachEvent('on' + evt, callback, capture);
    } else {
      elem['on' + evt] = null;
    }
  };

  return {
    add: add,
    remove: remove
  };
}());

e、 removeEvent侦听器

$(this).off('click', function(e) { console.log('goodbye') });

---

OP代码似乎是没有原型的ES5类？下面的演示是一个名为

Binder（）

的ES6

类

——此类中有一个修改版本：

• 构造函数

  接受选择器（带有CSS/jQuery语法的字符串），并返回嵌套在对象中的节点列表{节点列表

  }

• 第一个方法

  。每个（回调）

  将在每个节点（元素、标记等）上调用给定的回调（触发事件时调用的函数）

• （事件，回调）上的下一个方法

  。

  将使用

  .each（）

  方法绑定给定事件并向每个节点注册给定回调

• 最后一个方法

  .off（事件，回调）

  删除带有给定事件和回调的

  eventListener（）

Binder（）

使用以下语法实例化：

const $ = selector => new Binder(selector)

下面是如何将输入事件绑定到所有

s

和调用

函数validate（）

：

类绑定器{
构造函数（选择器）{
常量元素=document.querySelectorAll（选择器）；
this.length=elements.length；
分配（此，元素）；
}
每个（回调）{
for（让数组的节点从（此））{
callback.call（节点）；
}
归还这个；
}
打开（事件、回调）{
返回此值。每个（函数（）{
this.addEventListener（事件，回调）；
});
}
关闭（事件、回调）{
返回此值。每个（函数（）{
this.removeEventListener（事件，回调）；
});
}
};
const$=选择器=>新活页夹（选择器）；
常量colorBtn=e=>{
常数tgt=e.target；
if（tgt.matches（'button'））{
if（tgt.matches（'.off'））{
tgt.style.color=tgt.id；
}否则{
tgt.style.color='#000'；
}
tgt.classList.toggle（'off'）；
}
返回false；
}
常数unbindBtn=e=>{
常数tgt=e.target；
如果（tgt.选中）{
$（'button'）.off（'click'，colorBtn）；
}否则{
$（'button'）。在（'click'，colorBtn'）；
}
返回false；
}
$（'button'）。在（'click'，colorBtn'）；
美元（“#解除绑定”）。在（'change'，unbindBtn'）
按钮{
显示：块；
宽度：8厘米；
字体变体：小大写字母；
光标：指针
}
按钮：：之前{
内容：attr（id）；
}
.亮点{
背景：黄色；
}

Remove Event Listeners
我在开始时使用了callback，因为如果我有一个带有回调的off函数，我会执行该函数，然后removeListener with obj.callback不是吗good@some我在开始时使用了该回调，因为该函数不在elem.removeEventListener（事件、回调、捕获）中执行“我该怎么写呢？”有些我以为函数就是这样工作的。我以为你会在off回调上执行一个函数。纠正我如果我错了，它应该是什么样子，看看我的代码在末尾的upadrted示例回调在开始时执行，这只是fn函数，不是事件的初始回调，然后使用初始事件的回调，因此侦听器removed@some再看一看,，解析的off回调在开始时执行，这只是fn函数，然后回调被更改为实际的事件监听器事件，以便将其删除
$('input').on('input', validate)