Different Events in jQuery

In this lesson, we will go over some commonly used jQuery events. You can check out a detailed description of all jQuery events here.

The description of some events, along with relevant examples, is below.

Click event

The click event is triggered when a user clicks on an HTML element. The event handler function specifies the necessary task when the element is clicked.

In the example above, we assign a click event handler to a button element. The user clicks the button, triggering the event handler function, generating an alert with the message “Click event triggered!”

Double-click event

The dblclick event is triggered when a user double-clicks an HTML element. The event handler function specifies what needs to be done when the element is double-clicked.

In the above example, we assign a dblclick event handler to an HTML button element. When the user double clicks the button, the event handler is notified displaying an alert with the message “Double-click event triggered!”

Mouse hover event

The hover event is a combination of two jQuery events: mouseenter and mouseleave.

The hover event handler has two functions:

• The first function is triggered when the mouse enters the region occupied by that element.
• The second function is triggered when the mouse leaves the region occupied by that element.

Examine the example above. We assigned the hover event handler to all the elements with the class of boldText. When we enter or leave the region occupied by the specified elements, the hover event handler is notified, and relevant messages are printed on the console. This event is helpful when highlighting or enlarging an element on hover.

Multiple event handlers

We can also assign multiple event handlers to the same selector using the on method. That syntax is as follows:

$('selector').on({
  event_1 : function(){
    // response for event 1 goes here 
  },
  event_2: function(){
     // response for event 2 goes here 
    },
    .
    .
    .
  event_n: function(){
     // response for event n goes here 
    }
});

In the example below, we assign three events handlers click, mouseenter, and mouseleave, to the same selector "$(div") using the on method.