javascript - 非法调用 addEventListener

Question

使用 jQuery，您可以在任何 jQuery 对象上使用 .on()/.off()/.trigger() 方法，给出您对事件系统的强大访问权限。我正在尝试在 vanilla JavaScript 中做一些类似的事情，但我一直遇到 "TypeError: Illegal Invocation"。我知道此错误通常是指在方法需要引用时丢失了 this 引用。使用 .apply 或 .call 似乎通常可以解决问题，但我仍然遇到问题。

具体来说，我正在尝试创建一个启用事件的“类”，然后我可以从中扩展其他类，从而为我提供一种监听和触发非 DOM 对象事件的方法。 (是的，我知道 JS 没有真正的类。我正在使用 CoffeeScript，这就是那里使用的语法糖。)这是“类”函数，它创建一个新对象，该对象具有与传递给的对象相同的属性和值构造函数，并提供了 .apply() 来自 EventTarget.prototype 的三个方法。非常感谢任何有关如何使这项工作正常进行的指导!

EventEnabled = (function() {
  function EventEnabled(obj) {
    var key, val;
    for (key in obj) {
      val = obj[key];
      this[key] = val;
    }
  }

  EventEnabled.prototype.addEventListener = function() {
    return EventTarget.prototype.addEventListener.apply(this, arguments);
  };

  EventEnabled.prototype.removeEventListener = function() {
    return EventTarget.prototype.removeEventListener.apply(this, arguments);
  };

  EventEnabled.prototype.dispatchEvent = function() {
    return EventTarget.prototype.dispatchEvent.apply(this, arguments);
  };

  return EventEnabled;

})();

当我尝试在 EventEnabled 的实例上调用这三种方法中的任何一种时，我得到:

"TypeError: Illegal Invocation".

感谢您对此的任何见解!

Answer 1

EventTarget 只是一个 interface它是在 native DOM 对象上实现的，而不是可用于 javascript 的构造函数。虽然它可能在全局范围内可用，但您不能使用它来实例化它的实例。

此外，您只能将其方法应用于 native 实现该接口(interface)的对象(如 DOM 元素)，而不能应用于 EventEnabled 构造函数的任意实例。您将需要创建一个内部节点，或者您将需要实现您自己的事件调度系统(如果您不想使用许多可用库中的任何一个)。