on(), off(), one() and click()
Comparison of .on() method vs .click() method
-
.on()uses less memory and works for dynamically added elementsSupporting Statement
$("button.alert").click(function() { alert("we are using click method"); });When we use
.click()as shown above, a separate handler gets created for every single element that matches the selector$("button.alert").That means
- Many matching elements would create many identical handlers and thus increase memory footprint
- Dynamically added items won’t have the handler - i.e, in the above html the newly added “Alert!” buttons won’t work unless you rebind the handler.
-
While using
.on()we have a single handler for all elements that match our selector, including the ones created dynamically. -
Another reason to use
.on()is namespaced events.If you add a handler with
.on()(“click”, handler) you normally remove it with .off(“click”, handler) which will remove that very handler. Obviously this works only if you have a reference to the function, so what if you don’t ? You use namespaces:$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });with unbinding via
$("#element").off("click.someNamespace");
What is namespaced events? Looks like we are naming the events in order to distinguish them easily. This will likely be used primarily by plugin authors who wish to handle tasks differently depending on the event namespace used
on() Method
Description: Attach an event handler function for one or more events to the selected elements.
Syntax for on() Method
$(elements).on(events [, selector] [, data], handler);
Where:
eventsis the event type(s). It can be one or more space-separated event types, e.g. ‘click’ or ‘click keydown’. It can include an optional namespaces, e.g. “click.myPlugin”.selectorspecifies the decendants of the elements that trigger the event. It is optional, and if it is not included the event will always trigger when the element event occurs.datais any data you want to pass to the handler when the event is triggered. This is also optional, and if used is normally an object.handleris the function to execute when the event is triggered.
Using eventsMap in on()
You can also use an eventsMap to specify multiple events attached to one element.
$(elements).on(eventsMap [, selector] [, data]);
For example:
$('#container a').on({
click: function(e) {
e.preventDefault();
console.log('item anchor clicked');
},
mouseenter: function(e) {
console.log('enter!');
}
});
Using on() with event, data and handler
Example: Pass data to the event handler, which is specified here by name
function myHandler( event ) {
alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );
Using on() with event, selector and handler
An event-delegation approach attaches an event handler to only one element, the tbody, and the event only needs to bubble up one level (from the clicked tr to tbody):
$( "#dataTable tbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});
off() Method
Description: Remove an event handler.
Syntax for off() Method
$(elements).off( [ events ] [, selector] [, handler] );
With .off() all parameters are optional - using the parameters will allow you to be more specific in what event handling you wish to turn off. Specifying $(elements).off() will remove all event handlers from the element.
one() Method
Syntax:
.one( events [,selector] [, data ], handler )
Description: Attach a handler to an event for the elements. The handler is executed at most once per element per event type. In simple words lets consider below given code for a list. No matter which list item you click on the alert will be shown only once.
$( "#list" ).one( "click", 'li', function() {
alert( "This will be displayed only once." );
});