jQuery Introduction | Event Handling | Binding and Handling Events .on() .off() .one()

Tags:

Event binding

To handle an event that occurs on a specific element, you need to write an event handler function.
Connecting that event handler to a specific element is called event binding.

jQuery provides several ways to bind events.

The following examples show different ways to bind a click event handler to the element whose id is “btn”.

$("#btn").click(function(event) { // jQuery code to execute });
$("#btn").bind("click", function(event) { // jQuery code to execute });
$("#btn").on("click", function(event) { // jQuery code to execute });
$("body").on({"click": function(event) { // jQuery code to execute }}, "#btn");
$("body").on("click", "#btn", function(event) { // jQuery code to execute });

Since jQuery 1.7, even when you use the .bind() or .click() method, jQuery internally binds the event handler by using the .on() method.

Evolution of event handling

As jQuery has evolved, the way events are handled has also changed.
In jQuery 1.0, event handlers were registered with the .bind() method.
After that, event handling moved through the .live() and .delegate() methods, and today it is handled with the .on() method.

.on() method

jQuery uses the on() method to bind events to specific elements. The .on() method, introduced in jQuery 1.7, has the following characteristics.

  1. It can attach any type of event to the selected element.
  2. It can bind multiple events to a single event handler at the same time.
  3. It can bind multiple event handlers and multiple events to the selected element together.
  4. It can pass data to an event handler for custom events.
  5. It can bind events to elements that will be handled later.

Basic form

The following example displays an alert when an element is clicked.

$("p").on("click", function(){
  alert("The sentence was clicked.");
});

Run code

Setting multiple events on one event handler

With the .on() method, you can bind multiple events to a single event handler at the same time.

The following example sets the mouseenter and mouseleave events on a <p> element.

$("p").on("mouseenter mouseleave", function() {
  $("div").append("The mouse cursor entered or left the sentence.<br>");
});

Run code

You can also bind multiple events by using multiple event handlers on one element.

$("p").on({ 
  click: function() {
    $("div").append("The mouse clicked the sentence.<br>");
  },
  mouseenter: function() {
    $("div").append("The mouse cursor entered the sentence.<br>");
  },
  mouseleave: function() {
    $("div").append("The mouse cursor left the sentence.<br>");
  }
});

Run code

.off() method

The .off() method removes bindings for events that are no longer needed.

$("#btn").on("click", function() {
  alert("The button was clicked.");
});
$("#btnBind").on("click", function() {
  $("#btn").on("click").text("Button click enabled");
});
$("#btnUnbind").on("click", function() {
  $("#btn").off("click").text("Button click disabled");
});

Run code

.one() method

The .one() method runs a bound event handler only once, and then it will not run again.

$("button").one("click", function() {
  $("div").append("It cannot be clicked anymore.<br>");
});

Run code

The .one() method receives the same arguments as the on() method.
Therefore, it has the same characteristics as the .on() method, such as being able to use multiple event handlers and multiple events.

References