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 Object-Oriented JavaScript (2015) Introduction to Methods Returning Values

Craig Curtis
Craig Curtis
19,985 Points

What's the difference between using .onclick vs. .addEventListener('click', ...) ?

In Mr. Chalkley's jQuery Basics class, we learn that .click doesn't work on newly-created DOM events, while .on('click', ...) does.

Is this also the case here with .onclick vs. .addEventListener('click', ...)?

1 Answer

John Coolidge
John Coolidge
12,614 Points

I believe the main distinction between using .onclick and .addEventListener('click',...) is primarily one of utility. .addEventListener('click',...) will allow a single click to perform multiple functions (such as an interaction on the page and an AJAX request), while adding multiple .onclick methods to a single element will only allow the last .onclick assigned to it to run. .addEventListener is preferable in every case I can think of, even if only one function is going to run when the element is clicked (in case, for example, you wanted to expand your program later on; you'd need only add another addEventListener to the element rather than delete the .onclick and then add the two or more addEventListener methods).

I hope that helps. If not, please say so.