jQuery event handling and propagation

jQuery event handling takes care of many of these browser quirks. You can focus on writing code that runs on most supported browsers. jQuery's support for browser events is simple and intuitive. For example, this code listens for a user to click on any button element on the page:

$('button').click(function(event) {
  console.log('Mouse button clicked');
});

Just like the click() method, there are several other helper methods to cover almost all kinds of browser event. The following helpers exist:

• blur
• change
• click
• dblclick
• error
• focus
• keydown
• keypress
• keyup
• load
• mousedown
• mousemove
• mouseout
• mouseover
• mouseup
• resize
• scroll
• select
• submit
• unload

Alternatively, you can use the .on() method. There are a few advantages of using the on() method as it gives you a lot more flexibility. The on() method allows you to bind a handler to multiple events. Using the on() method, you can work on custom events as well.

Event name is passed as the first parameter to the on() method just like the other methods that we saw:

$('button').on( 'click', function( event ) {
  console.log(' Mouse button clicked');
});

Once you've registered an event handler to an element, you can trigger this event as follows:

$('button').trigger( 'click' );

This event can also be triggered as follows:

$('button').click();

You can unbind an event using jQuery's .off() method. This will remove any event handlers that were bound to the specified event:

$('button').off( 'click' );

You can add more than one handler to an element:

$("#element")   
.on("click", firstHandler) 
.on("click", secondHandler);

When the event is fired, both the handlers will be invoked. If you want to remove only the first handler, you can use the off() method with the second parameter indicating the handler that you want to remove:

$("#element).off("click",firstHandler);

This is possible if you have the reference to the handler. If you are using anonymous functions as handlers, you can't get reference to them. In this case, you can use namespaced events. Consider the following example:

$("#element").on("click.firstclick",function() { 
  console.log("first click");
});

Now that you have a namespaced event handler registered with the element, you can remove it as follows:

$("#element).off("click.firstclick");

A major advantage of using .on() is that you can bind to multiple events at once. The .on() method allows you to pass multiple events in a space-separated string. Consider the following example:

$('#inputBoxUserName').on('focus blur', function() {
  console.log( Handling Focus or blur event' );
});

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.