jQuery - Handling Events

In this tutorial we will learn about handling events using jQuery.

document ready

When the DOM gets completed an event is fired to signal that it is ready. We can listen to this ready event using jQuery and run our jQuery code only after this event.

For this we write the following code.

$(document).ready(function(){
  console.log("I am ready...");
});

The above code will print I am ready... only after the DOM ready event is fired.

click

To handle the click event we use click method.

In the following example an alert box will be displayed when the button having id "sample-button1" is clicked.

$("#sample-button1").click(function(){
  alert("I am clicked");
});

We can use the click() method to handle the click event but the new jQuery API recommends us to use the on() method.

on click

To handle the click event using the on() method we have to pass the click value and a function to handle the click event.

In the following example a message will be printed in the browser console when the button having id "sample-button1" is clicked.

$("#sample-button1").on("click", function(){
  console.log("Button Clicked...");
});

on hover

To handle the hover event we have to pass hover and a function to handle the hover event to the on() method.

In the following example a message will be printed in the browser console when the mouse hovers on top of a div having id "sample-div1".

$("#sample-div1").on("hover", function(e){
  if (e.type == "mouseenter") {
    console.log("Mouse entered...");
  } else if (e.type == "mouseleave") {
    console.log("Mouse left...");
  }
});

on submit

Another commonly used event is the submit event that is triggered when a form is submitted. And to capture this event we pass submit to the on() method.

In the following example we have a form having id "sample-form1" and we are handling the submit event.

$("#sample-form1").on("submit", function(){

  console.log("Form submitted...");

  // this will prevent reloading of page
  return false;

});

The above code will print "Form submitted..." when the form having id "sample-form1" is submitted.

Combining multiple events

We can combine and pass multiple events to the on() method.

In the following example we are combining the click, mouseenter and mouseleave event and passing them to the on() method.

$("#sample-div1").on("click mouseenter mouseleave", function(e) {
  // handle mouseenter event
  if (e.type == "mouseenter") {
    console.log("Mouseenter event fired...");
  }

  // handle mouseleave event
  else if (e.type == "mouseleave") {
    console.log("Mouseleave event fired...");
  }

  // handle click event
  else if (e.type == "click") {
    console.log("Click event fired...");
  }
});

Chaining events

We can also chain the events using the on() method.

In the following example we are chaining the click and mouseenter event.

$("#sample-div1")
  .on("click", function(){
    console.log("Click event fired...");
  })
  .on("mouseenter", function(){
    console.log("Mouseenter event fired...");
  });

Accessing element from event handler

We use the this keyword to access the element from inside the event handler function.

In the following example we have a div having id "sample-div1". Now lets say we want to add a class "clicked" to this div when it is clicked. For this we will write the following code.

$("#sample-div1").on("click", function(){
  
  // get the element using this keyword and add clicked class
  $(this).addClass("clicked");

});

In the above code $(this) is referring to the div having id "sample-div1".

Event triggering

We can trigger an event using the trigger() method.

In the following example we are triggering the submit event for a form having id "sample-form1" when a button having id "sample-button1" is clicked.

$("#sample-button1").on("click", function(){
  $("#sample-form1").trigger("submit");
});

Removing event

We can remove or unbind an event from an element by using the off() method.

If we want to remove all the events that are bound to a given element then we simply call the bind() method.

In the following example we are unbinding all events from a div having id "sample-div1".

$("#sample-div1").off();

We can also unbind specific event by passing it to the off() method.

In the following example we are unbinding the click event from the div having id "sample-div1".

$("#sample-div1").off("click");