addEventListener 上的非法调用答案

【问题标题】：Illegal Invocation on addEventListeneraddEventListener 上的非法调用
【发布时间】：2014-03-27 19:36:06
【问题描述】：

使用 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 实例上调用这三个方法中的任何一个时，我得到一个：

“类型错误：非法调用”。

感谢您对此的任何见解！

【问题讨论】：

addEventListener（和朋友）希望您将 DOM 元素作为 this 传递，而不是 EventEnabled 类的实例。
你如何创建EventEnabled 的实例？你在传递什么构造函数？怎么调用EventEnabled的addEventListener方法？
@RocketHazmat RE：第一条评论我只是希望这实际上并没有被强制执行，但如果是这样的话，那我就不走运了。 RE：第二条评论 像这样实例化和调用：var eventedObj = new EventEnabled( obj ); eventedObj.addEventListener("customEvent", function(event){ console.log(event); }, false);
是的，您只能在 DOM 元素上调用 addEventListener。 jQuery 允许您将事件“绑定”到任何 jQuery 对象，但那是因为它只是将函数存储在实例中并在触发时调用它。它只使用带有 DOM 元素的 addEventListener。
@RocketHazmat 我明白了，这很不幸。是的，在将 jQuery/vanilla 事件侦听器混合为 shown here 时，我注意到了一些奇怪的事情。我想我会想出一些其他的方法，谢谢你的帮助。

标签： javascript events dom-events addeventlistener prototypal-inheritance

【解决方案1】：

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

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

【讨论】：