JQuery/DOM element "click" event registration: on("click") VS click() VS addeventlistener("click")

Question

I'm learning javascript, and I've seen more than one way of registering click events:

$(DOMelement).click(function() {});
$(DOMelement).on('click',function() {});
(DOMelement).addEventListener('click', function() {});

Can someone tell me what's the best practice for event registration? Or the major advantage/disadvantage of each one? I'm asuming on() and click() are very similar, but since I'm just getting started I would like to know which is the most used so I can start writing efficient code from the start. Also, is it still a good practice to do the html onclick registration?

<button onclick="function()"></button>

$(DOMelement).addEventListener isn't a function. addEventListener is a native DOM Element function and you must unwrap the element from jQuery to use it: $(DOMelement)[index].addEventListener — Stryner
– Stryner, Commented Oct 20, 2014 at 17:13
You should try to keep your javascript out of your HTML as a general rule of thumb, and the three registrations are essentially the same. #3 is not jQuery, but used correctly it will accomplish the same thing. — Robert
– Robert, Commented Oct 20, 2014 at 17:13
So should I be using the addEventListener over the first ones? — sgarcia.dev
– sgarcia.dev, Commented Oct 20, 2014 at 17:20
So basically you are asking what is the difference between jQuery and native DOM? Or whether you should use jQuery or not? "is it still a good practice to do the html onclick registration" I don't think it ever was good practice. — Felix Kling
– Felix Kling, Commented Oct 20, 2014 at 17:35

Karl-André Gagnon · Accepted Answer · 2014-10-20 17:32:14Z

1

$(DOMelement).click(function() {}); is the shortcut of $(DOMelement).on('click',function() {});. It's a little bit less character, but $(DOMelement).on('click',function() {}); is faster.

$(DOMelement).addEventListener('click', function() {}); will never work because it is a native JavaScript function. You need to use an HTML element, not a jQuery one. That would work :

$(DOMelement)[0].addEventListener'click', function() {});

This is the fastest one because it is native, but there is some support issue, like in IE 8 and lower, it will throw an error because it use .attachEvent().

You last solution (<button onclick="function()"></button>) is the worst possible solution since it is bad for re-utilisability, make a lot of repetition when you have multiple element and also is a bad practice.

Basically, you should always use (when jQuery is loaded) .on().

edited Oct 20, 2014 at 17:32

answered Oct 20, 2014 at 17:14

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Thomas Over a year ago

Internet Explorer 9, and above, implement addEventListener() (check the compatibility: EventTarget.addEventListener()).

Karl-André Gagnon Over a year ago

@sgarcia performance wise, yes! Also, .on() can be used for event delegation.

qwertymk · Accepted Answer · 2014-10-20 17:35:17Z

0

These two use jQuery to bind the event to a callback and are an alias of the same exact function (.on):

$(DOMelement).click(function() {});
$(DOMelement).on('click',function() {});

This one uses the browser's api to bind it (a little lower level):

DOMelement.addEventListener('click', function() {});

The last one also works similar to the browser api way but it frowned upon:

<button onclick="function()"></button>

edited Oct 20, 2014 at 17:35

answered Oct 20, 2014 at 17:14

qwertymk

35.6k31 gold badges127 silver badges184 bronze badges

Collectives™ on Stack Overflow

JQuery/DOM element "click" event registration: on("click") VS click() VS addeventlistener("click")

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related