JavaScript - 如何在 "on"函数中添加对多个事件的支持？

Question

我制作了一个带有 on 函数的简单 JavaScript 库。
该库工作正常，但我想让我的 on 函数支持多个事件并向所有元素添加事件。

最有效的方法是什么？

这是我的 on 函数的代码:

Q.fn.on = function(type, fn){
  this[0]["on" + type] = fn;
};

Answer 1

您仅向第一个元素添加事件，因为您使用的是 this[0]。
this[0] 是 this 对象中的第一项，即第一个元素。
您想要做的是循环遍历 this 对象中的所有元素，并向每个元素添加一个事件监听器。

要支持多个事件，您需要将“type”字符串(现在称为 events)拆分为一个数组，循环遍历该数组并将每个元素与该数组中的每个事件附加在一起。

这应该适合您想要实现的目标。

Q.fn.on = function(events, callback) {
  // split multiple events into an array
  // or push a single event into a new array
  events = events.match(" ") ? events.split(" ") : [events];
  // loop through the events
  for(var e = 0; e < events.length; e++) {
    // replace the "on" in the event, we don't need it.
    ev = events[e].replace(/^on/, "");
    // loop through your elements, you want to add an event listener to all of them
    for(var i = 0; i < this.length; i++) {
      // add your event listener to the element
      this[i].addEventListener(ev, callback, false);
    }
  }
};

以防万一您需要一个具有相同行为方式的 off 函数:

Q.fn.off = function(events, callback) {
  // split multiple events into an array
  // or push a single event into a new array
  events = events.match(" ") ? events.split(" ") : [events];
  // loop through the events
  for(var e = 0; e < events.length; e++) {
    // replace the "on" in the event, we don't need it.
    ev = events[e].replace(/^on/, "");
    // loop through your elements, you want to remove the event listener from all of them
    for(var i = 0; i < this.length; i++) {
      // remove your event listener from the element
      this[i].removeEventListener(ev, callback, false);
    }
  }
};

有关在 JavaScript 中添加和删除事件的更多信息，请访问 MDN