Difference between .on () function calls

Question

What is the difference between the following?

$(document).on("scroll",".wrapper1", function(){ $(".wrapper2") .scrollLeft($(".wrapper1").scrollLeft()); }); $('.wrapper1').on("scroll", function(){ $(".wrapper2") .scrollLeft($(".wrapper1").scrollLeft()); }); 

When do you need each function to be used accurately?

Answer 1

Difference between these two characters

$('.wrapper1').on("scroll", ....) associates the scroll event only with those elements that are present during the execution of this statement, i.e. if any new element with class wrapper1 added dynamically after executing this statement, the event handler will not get execution for these elements.

$(document).on("scroll",".wrapper1", ...) , on the other hand, will register one event handler for the document object and will use event bubbles to call the handler whenever scrolling occurs inside an element with a class `wrapper``, so it will support the dynamic addition of elements.

So, when you need to prefer a method

you may prefer the first method if you have only a limited number of elements and they are not added dynamically.

Prefer the second method if you have many elements or these elements are added dynamically.

Answer 2

The effect will be the same, but the way the event handler has the event dispatched is slightly different.

You use .on() in each case, but the selector is not used in the second version. The event is delegated in the first instance and is directly related in the second. The .on() documentation states:

For direct events

a handler is called every time an event occurs on selected elements, regardless of whether it occurs directly on an element or bubbles from a streaming (internal) element

For delegated events

The handler is not called when the event occurs directly on the associated element, but only for descendants (internal elements) that correspond to the selector

What happens when an event is detected by the browser, it bubbles up on the DOM . In each element on the way up, jQuery will call the event handlers that were attached. In the first version, the event is propagated up to document before jQuery checks to see if the event has occurred in the class="wrapper1" . The second version, the event will stop bubbling earlier if the event was in the element class="wrapper1" .

Another difference is that the first version will still be able to bind an event handler if .wrapper1 does not exist when the page has finished loading, i.e. if the item is dynamically added, the second version will not work. When the page loads and executable jQuery $('.wrapper1') may not exist.

If the .wrapper1 element is not dynamic, you are likely to find a (slight) performance advantage for using the second version.

Everything aside, the scroll event does not bubble and cannot be delegated. However, they can be delegated again from the .on() documentation:

In all browsers, loading, scrolling, and error events (for example, on an element) do not bubble. In Internet Explorer 8 and below, paste and reset events do not bubble. Such events are not supported for use with delegation, but they can be used when the event handler is directly attached to the element that generates the event.

So, the only version that will work is the second! See a demo in the DevTools Console for document scroll output never appearing.

Answer 3

The difference is in the first case, when the listener is aiming at the document, therefore, if you do not have .wrapper1 when loading the page and add it additionally (AJAX or in some other way), the event will still fire (since the document is always there).

In the second case, if .wrapper1 is added dynamically, the event will not fire even if you think you are using .on (), since you do not have an element to bind this .on () to.

This second option should be used only when the selected item is not created dynamically, and the first - in the opposite case.