Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Responding to User Interaction Listening for Events with addEventListener()

Posted by Ben Flores
Ben Flores
17,074 Points

What's the difference between .addEventListener() and .on()?

I tried looking this up but only found answers for .addEventListener() vs .onclick() / .onchange() etc, but I'm wondering about .on()

In my eyes they do exactly the same thing, but I'm still learning! What's the difference between the two, when would I use one over the other?

1 Answer

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

One is normal JavaScript, the other is jQuery.

Specifically, .addEventListener() is a method of a normal DOM element and .on() is a jQuery object method. As you probably know, a jQuery object can represent more than one element and when you use the .on() method you are attaching and event handler to every element in the collection.

So essentially, they work with different kinds, and potentially quantities, of things.

Ben Flores
Ben Flores
17,074 Points

Ahh, makes complete sense. Thank you!