addEventListener上的非法调用 [英] Illegal Invocation on addEventListener

问题描述

使用jQuery，您可以使用 .on（） / .off（） / .trigger（）任何jQuery对象上的方法，为您提供对事件系统的强大访问。我试图在vanilla JavaScript中做类似的事情，但我一直遇到TypeError：Illegal Invocation。我知道这个错误通常是指当方法需要时会丢失这个引用。使用 .apply 或 .call 似乎通常可以解决问题，但我仍遇到问题。

With jQuery you can use .on()/.off()/.trigger() methods on any jQuery object, giving you powerful access to the event system. I'm trying to do something similar in vanilla JavaScript but I keep running into "TypeError: Illegal Invocation". I'm aware this error generally refers to losing a this reference when the method expects one. Using .apply or .call seems to usually do the trick, but I'm still running into problems.

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

Specifically, I'm trying to create an event enabled "class", which I can then extend other classes from, giving me a way to listen for and trigger events on non-DOM objects. (Yes, I know JS doesn't have real classes. I'm using CoffeeScript and thats the syntactic sugar used there.) Here is the "class" function which creates a new object with the same properties and values as the object passed to the constructor, and provides three methods that .apply() methods from EventTarget.prototype. Any guidance on how to get this working would be immensely appreciated!

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 ：非法调用。

When I try to call any of those three methods on an instance of EventEnabled, I get a "TypeError: Illegal Invocation".

感谢您对此有任何见解！

Thanks for any insight into this!

推荐答案

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

EventTarget is only an interface which is implemented on native DOM objects, not a constructor that is available to javascript. While it might be available in the global scope, you cannot use it for instantiating instances of it.

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

Also, you can apply its methods only on objects that have natively implemented that interface (like DOM elements), not on an arbitrary instance of your EventEnabled constructor. You will either need to create an internal node, or you will need to implement your own event dispatching system (if you don't want to use any of the many available libraries).

这篇关于addEventListener上的非法调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！