jQuery 1.7 Released – Event handling in a better, simplified and consolidated way

In case you missed it, you can find the announcement here. Apart from the improved delegate performance (which turned out to be a wonderfully simple solution!) – the nicest feature IMO is the standardized way to bind events. The new .on() and .off() methods handle the new method of event binding. In a nutshell, we don’t have to worry about different methods such as .live(), .bind() and .delegate(). We also don’t have to worry about the event specific methods like .click(). We also don’t have to worry about the .unbind() method either. The simplified .on() and .off() methods consolidate these disparate methods into single, simplified, shortened and consolidated methods. Because of the improved performance with delegates, these methods are recipients of those improvements, assuming of course that a delegate is what will be manifested.

As to the .on method, the one are that requires special attention is the optional selector argument. To explain, let’s assume you have an element that has child elements and you wish to bind a click handler. I will use the example provided in the jquery documentation.

//in this example, a click handler will be attached to every table row.
$("#dataTable tbody tr").on("click", function(event){
 alert($(this).text());
});

The preceeding example could be quite expensive if you have a lot of rows. Note the following example which uses the optional selector argument:

//in this example, the bound element is the tbody, not the tr's under the tbody.
//the second argument in the .on call is used, in this case, we pass the "tr" selector.
$("#dataTable tbody").on("click","tr", function(event){
 alert($(this).text());
});

The difference between these two examples may seem semantic. The difference is anything but. In the second example, the handler is attached to one element – the tbody. The event is then delegated to the tr elements – which is directly beneath the tbody. Per the jQuery documentation, when you delegate events, be sure to define them as close in proximity to the child objects that will actually be used to fire the events. Otherwise, jQuery has to work harder to traverse through the object hierarchy.

Finally, if you want an event that runs one time only and then detaches itself, check out the new .one() method.  How many times have you defined an action the user can only do one time. All of that code that you wrote to manually unbind the event is no longer necessary thanks to the new .one() method!

About johnvpetersen

I've been developing software for 20 years, starting with dBase, Clipper and FoxBase + thereafter, migrating to FoxPro and Visual FoxPro and Visual Basic. Other areas of concentration include Oracle and SQL Server - versions 6-2008. From 1995 to 2001, I was a Microsoft Visual FoxPro MVP. Today, my emphasis is on ASP MVC .NET applications. I am a current Microsoft ASP .NET MVP. Publishing In 1999, I wrote the definitive whitepaper on ADO for VFP Developers. In 2002, I wrote the Absolute Beginner’s Guide to Databases for Que Publishing. I was a co-author of Visual FoxPro Enterprise Development from Prima Publishing with Rod Paddock, Ron Talmadge and Eric Ranft. I was also a co-author of Visual Basic Web Development from Prima Publishing with Rod Paddock and Richard Campbell. Education - B.S Business Administration – Mansfield University - M.B.A. – Information Systems – Saint Joseph’s University - J.D. – Rutgers University School of Law (Camden) In 2004, I graduated from the Rutgers University School of Law with a Juris Doctor Degree. I passed the Pennsylvania and New Jersey Bar exams and was in private practice for several years – concentrating transactional and general business law (contracts, copyrights, trademarks, independent contractor agreements, NDA’s, intellectual property and mergers and acquisitions.).
This entry was posted in jQuery, Uncategorized. Bookmark the permalink. Follow any comments here with the RSS feed for this post.