未捕获的TypeError:addEventListener上的非法调用

Question

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

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

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

ronan是一个div由控制台成功返回的元素,所以我不认为这是问题所在.有什么想法我得到这个错误？我读了这个帖子,我无法弄明白.

Answer 1

你需要包装alert一个函数.这将有效:

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

这是一个证据小提琴.alert单独使用不起作用,因为当执行侦听器时,this该函数内的值被设置为它正在侦听的对象.例如,如果ronan在该侦听器中设置了侦听器this === ronan.这提出了一个问题,alert因为该函数期望this等于window.你可以通过将函数包装在另一个函数中或者将它绑定到它预期的任何函数来解决这个问题(没有双关语)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]);