Starting with version 1.7, jQuery has made an effort to simplify the API for setting events. While you’ll still be able to .bind() and .unbind(), .live() and .die() and set .click() and .blur() the old way, there’s now a unified API which bundles all the various functionalities under one, consistent API. The two new methods are .on() and .off(). Moving forward, these two new methods represent the preferred API, so it’s worth learning about them now so that any new projects you kick off going forward start by using the recommended API.
The beauty of .on() is that it replaces the functionality of all the event methods covered in this chapter with a single, flexible API. The following code sample shows a basic example of .on(), using it to bind a click event to an element already present in the DOM. IT accepts two arguments in this example, an eventType and a handler function to execute.
This would compare to directly using .bind(”click”) or .click() and as proof, this sample rewrites the .bind() example from earlier in the chapter.
itml>
<head>
<script src=”http://code.jquery.com/jquery-1.7.1.js”></script>
<script>
$(function(){
$(“#aDiv”).on(‘click’, function(){
console.log(“Handler 1”);
});
$(“#aDiv”).on(‘click’, function(){
console.log(“Handler 2”);
});
});
</script>
</head>
<body>
<div id=”aDiv” class=”boxDiv”>Press Me </div>
</body>
</html>
Code snippet is from on-click.txt
Beyond that basic example, on() also exposes the same functionality present in .delegate() and .live() and does so with the exact same syntax. To use .on() like delegate() or .live(), simply add a second, optional selector argument representing the target element for the event. This first example shows on() used to replace our example of live() from earlier in the chapter. In it, on() is used to listen for clicks on the document and fire the provided handler function if the click originates from an element with the ID #anchor. Since the listener is set on the document, it will work whenever and wherever the #anchor appears.
<html>
<head>
<script src=”http://code.jquery.com/jquery-1.7.1.js”></script>
<script>
$(function(){
// element doesn’t exist yet, but we can create handler
// anyways
$(document).on(“click”, “#anchor”, function(event){
console.log(“I have a handler”);
});
$(“body”).append(“<a id=’anchor’> I go no where </a>”)
});
</script>
</head>
<body>
</body>
</html>
Code snippet is from on-live.txt
Using on() like delegate() uses the exact same syntax as the live() replacement in the previous example. This illustrates one of the benefits of the new, simplified events API. Instead of remembering two separate methods and their associated arguments, you simply remember the one on() method and adjust your arguments accordingly. If you truly need to bind events to generic elements across the whole page, you just use .on() on the document and pass in your generic p or a selector.
If you want to follow the more performant delegate pattern, you simply apply .on() to a more focused selector. Rewriting the earlier .delegate() example to use .on() is shown in the following code sample. In it, .on() is used to listen for clicks on the #delegate div and fires the provided handler function if the click originates on a p.
<html>
<head>
<script src=”http://code.jquery.com/jquery-1.7.1.js”></script>
<script>
$(function(){
$(“#delegate”).on(“click”, “p” , function(){
console.log(‘ouch’);
}).css(“color”, “green”);
});
</script>
</head>
<body>
<div id=”delegate”>
<p>Hit Me!</p>
</div>
</body>
</html>
Code snippet is from on-delegate.txt
Removing events is as simple as reversing the process with .off(), the same way you would use .unbind() or .die(). The following code shows how to remove the events set in the previous examples.
$(“#delegate”).off(“click”, “p”);
$(document).off(“click”, “#anchor”);
$(“#aDiv”).off(‘click’);
As you can see, this new event API radically simplifies the way jQuery handles events. All the same power and convenience you’ve learned about in this chapter is still available, it’s just presented in a more straightforward, consistent manner.
Source: Otero Cesar, Rob Larsen (2012), Professional jQuery, John Wiley & Sons, Inc