未捕获的 TypeError：非法调用 addEventListener答案

【问题标题】：Uncaught TypeError: Illegal invocation on addEventListener未捕获的 TypeError：非法调用 addEventListener
【发布时间】：2011-08-27 08:25:23
【问题描述】：

我得到了Uncaught TypeError: Illegal invocation，这两个版本都试图放下一个 EventListener：（当我应该添加监听器时，我得到了错误，而不是当我点击目标时）

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

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

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

【问题讨论】：

也许我应该等到早上提交这个
可能是 alert... 原生函数。空白function(){} 可以代替它吗？
@Artur Sapek 你确定ronan 是一个HTMLDivElement 吗？如果是这样，您可以发布代码设置其值吗？另外，如果您可以提供指向演示页面的链接，那就太好了。顺便问一下，哪个早上在说？现在是欧洲的早晨，南美洲的清晨。
第二行也不应该是ronan.addEventListener.apply(... 而不是addEventListener.apply(...？
第二行使用apply 是错误的——应该是HTMLElement.prototype.addEventListener.apply(ronan, [function () { }]);。

标签： javascript addeventlistener

【解决方案1】：

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

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

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

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

别忘了在 IE 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]);

【讨论】：

哦，你说得对。事实上，我什至没有使用原型对象，只是基础，但你的方法在没有原型部分的情况下仍然有效。我可能应该知道 bind() 因为我的 JS 如此专注于 DOM。非常感谢您的宝贵时间！