javascript - 未捕获的类型错误 : Illegal invocation on addEventListener

Question

我得到了一个 Uncaught TypeError: Illegal invocation 对于这个试图放下 EventListener 的两个版本:(我在应该添加监听器时收到错误，而不是在我点击目标时收到错误)

ronan.addEventListener("click", alert, false);

addEventListener.apply(ronan, ["click", alert, false]);

ronan 是控制台成功返回的 div 元素，所以我认为这不是问题所在。为什么我会收到此错误的任何想法？我读了this线程，我无法从中弄清楚。

Answer 1

您需要将 alert 包装在一个函数中。这将起作用:

ronan.addEventListener("click", function() { alert('Hi'); }, false);

这是一个 fiddle为证。单独使用 alert 是行不通的，因为当一个监听器被执行时，该函数内的 this 的值被设置为它正在监听的对象。例如，如果您在 ronan 上设置监听器，则在该监听器内 this === ronan。这给 alert 带来了问题，因为该函数期望 this 等于 window。您可以通过将函数包装在另一个函数中或将其绑定(bind)到它期望 this 的任何内容来解决这个问题(没有双关语意):

document.body.addEventListener('click', alert.bind(window), false);

不要忘记在 IE < 9 中你需要使用 attachEvent 而不是 addEventListener。

---

关于使用 apply/call 和 addEventListener 的注意事项

您的第二次尝试不会成功，因为您正尝试将参数应用于 window.addEventListener，而不是 HTMLElement.prototype.addEventListener，这是一个完全不同的功能:

// This won't work
addEventListener.apply(ronan, ["click", alert.bind(window), false]);

// This will work
HTMLElement.prototype.addEventListener.apply(ronan, ['click', alert.bind(window), false]);