Mastering JavaScript

DOM Manipulation and Events
You can add multiple event handlers for multiple events as follows:
$( "#heading" ).on({
mouseenter: function() {
console.log( "mouse entered on heading" );
},
mouseleave: function() {
console.log( "mouse left heading" );
},
click: function() {
console.log( "clicked on heading" );
}
});
As of jQuery 1.7, all events are bound via the on() method, even if you call helper
methods such as click(). Internally, jQuery maps these calls to the on() method.
Due to this, it's generally recommended to use the on() method for consistency and
faster execution.
Event delegation
Event delegation allows us to attach a single event listener to a parent element. This
event will fire for all the descendants matching a selector even if these descendants
will be created in the future (after the listener was bound to the element).
We discussed event bubbling earlier. Event delegation in jQuery works primarily
due to event bubbling. Whenever an event occurs on a page, the event bubbles up
from the element that it originated from, up to its parent, then up to the parent's
parent, and so on, until it reaches the root element (window). Consider the following
example:
Google
Myntra
Bing
[ 198 ]
www.it-ebooks.info