JQuery event handler with or without on?

Question

If I have a dropdown in my html document looking like this:

<select id="myDropdown">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="banana">Banana</option>
</select>

and I want to hook up on the change event with JQuery, then both of these approaches seem to work with JQuery:

$("#myDropdown").change(function () {
   // Do something
});

and

$('#myDropdown').on('change', function () {
   // Do something
});

What is the difference between these two, and is one of them to prefer?

possible duplicate of [What is best way to perform jQuery .change()](http://stackoverflow.com/questions/9995638/what-is-best-way-to-perform-jquery-change) — GreyRoofPigeon, Aug 25 '15 at 10:55
@LinkinTED I believe this question is about event binding in general, not only concerning change() — Alex, Aug 25 '15 at 10:56
@Alex __As of 1.7 however, on() was introduced... That now means change() is a shortcut for on("change")__ — Medet Tleukabiluly, Aug 25 '15 at 10:57
Generelly speaking, calling `on()` on the set of matched elements that the event will be bound to (not like delegation), the only main difference is that you can switch off the event using `off()` — Alex, Aug 25 '15 at 10:57
but you can still switch off by using `$().change(function(){})` (empty handler) — Medet Tleukabiluly, Aug 25 '15 at 10:59
@OP: just have a read on directly and delegated events on the official documentation: http://api.jquery.com/on/ — Alex, Aug 25 '15 at 10:59

Jai · Answer 1 · 2015-08-25T11:05:40.967

2

See, both are called event binding, there is no difference but .on() has some advantages over direct event binding (don't have right word for it).

The advantage with .on() method is event delegation, which is useful when you have a dynamically created element in the page. It has a bit specific syntax but uses .on() method:

$(staticParent).on(event, selector, callback);

There is another advantage of .on() method is, if you have bound any event on a selector then that event can be called off with .off() method.

Also want to mention that .on()/.off() has replaced the .bind()/.unbind() methods and about event delegation it has replaced .live()/.die().

edited Aug 25 '15 at 11:05

answered Aug 25 '15 at 11:00

Jai

74,255
12
74
103

its actually called direct and delegated events, so you were correct ;-) – Alex Aug 25 '15 at 11:01
@rafat not more than direct binding would have, does it? – Alex Aug 25 '15 at 11:03

score 1 · Answer 2 · answered Aug 25 '15 at 11:12

$.on(...), is much more powerful approach since it allows you to attach only one event listener on a container, and provide it with matching selectors, instead of attaching tons of event listeners... For example, this code:

$('#container .item').click(function(){ ... });

VS

$('#container').on('click', '.item', function(){ ... });

The .click() approach attaches event listener to every .item element- possibly A LOT of them on page...

The .on('click'...) approach only attach one event listener to the #container element, and on every click it checks if the element that triggered the event is an .item element, and if so- executes the callback function.

The .on(...) function also "catch" .item elements that are not on the page when this piece of js runs, not like the .click() method that only binding currently existing .item elements, and you would need to bind it manually if you later inject newly created .item elements to the page.

JQuery event handler with or without on?

2 Answers2