Java Reference
In-Depth Information
} else {
alert("You double-clicked me!");
}
}
$(".class-two").on("click dblclick", eventHandler);
This code registers event listeners for the
click
and
dblclick
events on all elements with a
class‐two
CSS class. The code inside
eventHandler()
determines what event caused the function
to execute and responds appropriately.
Although it can be useful to use a single function for handling multiple events, jQuery also lets you
define multiple event listeners with different functions. Instead of passing two arguments to
on()
as
shown in the previous examples, you pass an ordinary JavaScript object in which the properties are
the event names, and their values are the functions that handle the events. For example:
function clickHandler(e) {
alert("You clicked me!");
}
function dblclickHandler(e) {
alert("You double-clicked me!");
}
$(".class-three").on({
click: clickHandler,
dblclick: dblclickHandler
});
This code registers
click
and
dblclick
event listeners for every element with the
class‐three
CSS
class; different functions handle the
click
and
dblclick
events.
Removing event listeners is equally simple with the
off()
method. Simply supply the same
information you passed to
on()
. The following code removes the event listeners registered in the
previous examples:
$(".class-one").off("click", elementClick);
$(".class-two").off("click dblclick", eventHandler);
$(".class-three").off({
click: clickHandler,
dblclick: dblclickHandler
});
You can also use the
off()
method to remove all event listeners for the selected elements by not
passing any arguments to the method:
$(".class-four").off();
the jQuery event Object
As you learned in Chapter 10, some big differences exist between the standard and legacy IE event
models. Remember that jQuery was created to make cross‐browser JavaScript easier to write and
