JavaScript 2.0-The Complete Reference, Second ... - freecodingtutorial

Preventing Bubbling
You can stop events from propagating up the hierarchy by setting the cancelBubble property
of the Event object. This property is false by default, meaning that after a handler is finished
with the event, it will continue on its way up to the next enclosing object in the hierarchy. Setting
the cancelBubble property to true prevents further bubbling after the current handler has
finished. For example, you could prevent the event from getting beyond the tag in the
last example by making this small modification:
...BOLD
TEXT...
The result of clicking on the bold text after this change is made is shown in Figure 11-2.
Figure 11-2: If an event is cancelable, setting event.cancelBubble prevents the event from
propagating.
Not all events are cancelable; Table 11-9 indicates whether each event can be canceled in this
way.
It is important to keep in mind that returning false from a handler (or setting event.returnValue
to false) prevents the default action for the event, but does not cancel bubbling. Later handlers
invoked by the bubbling behavior will still have a chance to handle the event, and any value
they return (or set event.returnValue to) will ―overwrite‖ the value set or returned by a previous
handler.
Conversely, canceling bubbling does not affect the event‘s return value. Because the default
returnValue of an event is true, you need to be sure to return false or set returnValue to
false if you wish to prevent the event‘s default action.
Imitating Netscape’s Event Capture
Because all parts of the page are scriptable in IE4+, performing event captures as in Netscape
4 is very easy. Simply set the handler at the appropriate level in the hierarchy, for example, to
capture clicks at the Document level with the function myHandler:
document.onclick = myHandler;
and omit Click handlers from lower objects. To unset event capture, simply set the appropriate
handler to null, for example, to turn off click capturing at the Document level:
document.onclick = null;
Event Routing
Events bubble up strictly through objects in the hierarchy that contain them. There is, however,
a primitive way to redirect to another object in Internet Explorer 5.5+. Each object has a
fireEvent() method that transfers the event to the object on which it is invoked:
object.fireEvent(“event to fire“ [, eventObject])
The first argument is a string denoting the handler to fire, for example, "onclick". The optional
eventObject parameter is the Event object from which the new Event object will be created. If
eventObject is not given, a brand new Event is created and initialized as if the event had really
occurred on the target object. If eventObject is specified, its properties are copied into the new