All this talk of propagation, event model inconsistencies, and so on, is enough to drive anyone mad. The logical next step is to abstract away the differences in event-handling mechanisms, which is precisely what jQuery does. You have a few options for binding event handlers in jQuery: .bind(), .live(), one of the several event methods such as .click(), .load(), or .mouseout(), or the new unified on() and off() API introduced in jQuery 1.7.
Just like DOM level 2, you can bind more than one event handler to the same event using .bind():
<html>
<head>
<script src=”http://code.jquery.com/jquery-1.7.1.js”></script>
<script>
$(function(){
$(“#aDiv”).bind(‘click’, function(){
console.log(“Handler 1”);
});
$(“#aDiv”).bind(‘click’, function(){
console.log(“Handler 2”);
});
});
</script>
</head>
<body>
<div id=”aDiv” class=”boxDiv”>Press Me </div>
</body>
</html>
Code snippet is from bind.txt
The superfluous “on” is removed from the event name, so instead of onclick() you use click(). In this example, upon clicking the div, aDiv, you will see both logs. Because jQuery is handling all of the behind-the-scenes details, .bind(), .click(), and so on are the same independent of which browser is interpreting your code. Quite a relief!
jQuery’s mechanism for handling events has a consistent naming for all the different event types independent of the browser, and like the DOM level 2 model, allows for multiple event handlers on the same element and event type. The Event object passed into the handlers is also normalized and is of the type jQuery.Event, and is guaranteed to contain the properties outlined in Table 5-3 independent of browser/platform:
Source: Otero Cesar, Rob Larsen (2012), Professional jQuery, John Wiley & Sons, Inc