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...