window.onscroll 和 window.addEventListener 有什么区别答案

【问题标题】：What is the difference between window.onscroll and window.addEventListenerwindow.onscroll 和 window.addEventListener 有什么区别
【发布时间】：2020-06-29 21:32:10
【问题描述】：

我找不到做的区别：

window.onscroll = () => console.log("scroll")

还有这个：

window.addEventListener('scroll', () => console.log("scroll"))

除了浏览器兼容性，大多数 IE 版本似乎都不支持这两者！

这只是语法差异吗？使用removeEventListener 删除处理程序似乎很简单，但我假设window.onscroll = null 具有类似的效果。

我错过了什么吗？

【问题讨论】：

这能回答你的问题吗？ addEventListener vs onclick
"除了浏览器兼容性，大多数 IE 版本似乎都不支持这两者" 不支持的是箭头函数，而不是事件处理程序
@Azametzin 部分是的，令人讨厌的是，大多数答案都非常陈旧，因为您不知道在最近的现代框架中是否仍然应该关心它们。我将 React 与仅包含现代浏览器的浏览器矩阵一起使用（我不关心 IE 9 或 11）所以基本上我需要一个在今天有效的简短答案，而不是 6 年前
@VLAZ 如果您查看 MDN 文档，您会看到两种方式都有 Unknown compatibility 在 IE 列下 developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event developer.mozilla.org/en-US/docs/Web/API/Window/scroll
当您的问题是关于 vanilla JS 事件处理时，为什么要提到浏览器框架？

标签： javascript addeventlistener onscroll

【解决方案1】：

主要区别在于只能有一个 onscroll。您添加的任何其他 onscrolls 都将覆盖第一个，而您可以拥有任意数量的 .addEventListener('scroll', ()=>{})。

【讨论】：

主要区别实际上是 onXXX 方法在脚本注入上下文中是危险的
谢谢，你说得对，我真的错过了
补充一点，onXXX 可以在 HTML 代码中内联使用，这限制了对函数范围的控制

【解决方案2】：

与onXXX 相比，使用addEventListener 有几个优点。你可以在这里看到我与狂热者的对话：How to interact my button with my function

对于我自己，每次开始使用 Content-Security-Policy 时，我都会切换到使用 addEventListener，它会禁止这些内联函数。问题在于脚本注入，例如，有人在在线聊天室中发布带有 onXXX 函数的 html 元素。

差别不大，但最好只使用addEventListener

【讨论】：

这实际上是非常有效的一点，当使用内联处理程序时，CSP 将成为一个阻塞器