Mastering JavaScript

Chapter 8
These are two completely opposite views and implementations of how browsers
handled events. To end this madness, World Wide Web Consortium (W3C) decided
a wise middle path. In this model, an event is first captured until it reaches the
target element and then bubbles up again. In this standard behavior, you can choose
in which phase you want to register your event handler—either in the capturing
or bubbling phase. If the last argument is true in addEventListener(), the event
handler is set for the capturing phase, if it is false, the event handler is set for the
bubbling phase.
There are times when you don't want the event to be raised by the parents if it was
already raised by the child. You can call the stopPropagation() method on the
event object to prevent handlers further up from receiving the event. Several events
have a default action associated with them. For example, if you click on a URL link,
you will be taken to the link's target. The JavaScript event handlers are called before
the default behavior is performed. You can call the preventDefault() method on
the event object to stop the default behavior from being triggered.
These are event basics when you are using plain JavaScript on a browser. There is
a problem here. Browsers are notorious when it comes to defining event-handling
behavior. We will look at jQuery's event handling. To make things easier to manage,
jQuery always registers event handlers for the bubbling phase of the model. This
means that the most specific elements will get the first opportunity to respond to
any event.
jQuery event handling and propagation
jQuery event handling takes care of many of these browser quirks. You can focus on
writing code that runs on most supported browsers. jQuery's support for browser
events is simple and intuitive. For example, this code listens for a user to click on any
button element on the page:
$('button').click(function(event) {
console.log('Mouse button clicked');
});
Just like the click() method, there are several other helper methods to cover almost
all kinds of browser event. The following helpers exist:
• blur
• change
• click
• dblclick
[ 195 ]
www.it-ebooks.info