What is the difference between window.onscroll and window.addEventListener

Question

I can't find the difference between doing:

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

and this:

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

except for browser compatibility which both seems to be unsupported in most IE versions !

is it just a syntax difference? it seems that it is straightforward to remove the handler using removeEventListener, but I'm assuming window.onscroll = null has similar effect.

am I missing anything?

Does this answer your question? [addEventListener vs onclick](https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick) — Azametzin, Mar 18 '20 at 18:29
"*except for browser compatibility which both seems to be unsupported in most IE versions*" it's arrow functions that are unsupported, not event handlers — VLAZ, Mar 18 '20 at 18:32
@Azametzin Partially yes, it is just annoying that most answers are very old to the fact you don't know if you still should care about them in recent modern frameowrks. I'm using React with a browser matrix that includes only modern browsers (I don't care about IE 9 or 11) So basically I need a short answer that is valid today not 6 years ago — Nour, Mar 18 '20 at 18:41
@VLAZ if you check MDN documentation you will see that both ways have `Unknown compatibility` under IE column https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll — Nour, Mar 18 '20 at 18:42
Why do you mention browser frameworks, when your question is about vanilla JS event handling? — VLAZ, Mar 18 '20 at 18:56
@VLAZ I still have to use vanilla JS in React. I'm not aware of any way specific to React to handle scroll, right? — Nour, Mar 18 '20 at 18:57

score 10 · Answer 1 · answered Mar 18 '20 at 18:32

10

The main differences is that there can only be one onscroll. Any additional onscrolls you add will override the first, whereas you can have as many .addEventListener('scroll', ()=>{}) as you want.

answered Mar 18 '20 at 18:32

Austin Ezell

753
4
12

3

The main difference actually is that onXXX methods are dangerous in the script injection context – ControlAltDel Mar 18 '20 at 18:37
Thanks, you are right about this, I missed it actually – Nour Mar 18 '20 at 18:43
1

Adding to your point, onXXX can be used inline in HTML code which limits the control over the scope of the function – Nour Mar 18 '20 at 18:44

score 3 · Answer 2 · answered Mar 18 '20 at 18:36

There are several advantages to using addEventListener over onXXX. You can see my conversation with a zealot about this on SO here: How to interact my button with my function

For myself, I switched to using addEventListener every time when I started using Content-Security-Policy, which prohibits these inline functions. The issue is in script injection, where someone posts html elements with onXXX functions in an online chatroom, for instance.

The difference isn't huge, but it's better to only use addEventListener

That's actually very valid point, CSP will be a blocker when using inline handlers — Nour, Mar 18 '20 at 18:45

What is the difference between window.onscroll and window.addEventListener

2 Answers2