When the target of an event is the Window object, or some other standalone object (such as an XMLHttpRequest), the browser responds to an event simply by invoking the appropriate handlers on that one object.
however, when the event target is a Document or document Element, the situation is different .
Event flow describes the order in which events are received on the page. the IE and Netscape development teams came up with an almost exactly opposite concept of event flow . IE would support an event bubbling flow , whereas Netscape Communicator would support an event capturing flow.
After the event handlers registered on the target element are invoked, most events bubble up the DOM tree . The event handlers of the target’s parent are invoked . Then the handlers registered on the target’s grandparent are invoked . This continues up to the Document object, and then beyond to the Window object . Event bubbling provides an alternative to registering handlers on lots of individual document elements : instead you can register a single handler on a common ancestor element and handle events there . You might register an “change” handler on a <form> element, for example, instead of registering a “change” handler for every element in the form.
Most events that occur on document elements bubble . Notable exceptions are the focus, blur, and scroll events. The load event on document elements bubbles, but it stops bubbling at the Document object and does not propagate on to the Window object . The load event of the Window object is triggered only when the entire document has loaded .
Event bubbling is the third “phase” of event propagation. The invocation of the event handlers of the target object itself is the second phase. The first phase, which occurs even before the target handlers are invoked, is called the “capturing” phase.
Consider the following HTML document :
< html >
< head >
< title > Event Propagation < /title >
< /head >
< body >
< div id=”myDiv” > Click Me < /div >
< /body >
< /html >
When you click the < div > element in the page, the click event occurs in the following order :
1. < div >
2. < body >
3. < html >
4. document
The capturing phase of event propagation is like the bubbling phase in reverse. The capturing handlers of the Window object are invoked first, then the capturing handlers of the Document object, then of the body object, and so on down the DOM tree until the capturing event handlers of the parent of the event target are invoked. Capturing event handlers registered on the event target itself are not invoked.
If the previous example is used with event capturing, clicking the < div > element fires the click event in the following order :
1. document
2. < html >
3. < body >
4. < div >
Recall that addEventListener() takes a boolean value as its third argument. If that argument is true, the event handler is registered as a capturing event handler for invocation during this first phase of event propagation.
Event bubbling is universally supported: it works in all browsers including IE, and it works for all handlers, regardless of how they are registered (unless they are registered as capturing event handlers).
Event capturing only works with event handlers registered with addEventListener() when the third argument is true. This means that event capturing is not available in IE prior to IE9 .
The event flow specified by DOM Level 2 Events has three phases: the event capturing phase, at the target, and the event bubbling phase. Event capturing occurs first, providing the opportunity to intercept events if necessary. Next, the actual target receives the event. The final phase is bubbling, which allows a final response to the event. Considering the simple HTML example used previously, clicking the < div > fires the event in the order
1. document
2. < html >
3. < body >
In the DOM event flow, the actual target (the < div > element) does not receive the event during the capturing phase. This means that the capturing phase moves from document to < html > to < body > and stops.
4. < div >
5. < body >
6. < html >
7. document
The next phase is “ at target ,” which fires on the < div > and is considered to be part of the bubbling phase in terms of event handling . Then, the bubbling phase occurs and the event travels back up to the document.
The return value of an event handler registered by setting an object property or an
HTML attribute is sometimes significant. In general, a return value of false tells the
browser that it should not perform the default action associated with the event. The
onclick handler of a Submit button in a form, for example, can return false to prevent
the browser from submitting the form. (This is useful if the user’s input fails client-side
validation.)
In browsers that support addEventListener(), you can also cancel the default action for an event by invoking the preventDefault() method of the event object .
In IE prior to IE9, however, you do the same by setting the returnValue property of the event object to false.
The following code shows a dummy event handler that uses all three cancellation techniques:
function cancelHandler(event) {
var event = event || window.event; // For IE
/* Do something to handle the event here */
// Now cancel the default action associated with the event
if (event.preventDefault) event.preventDefault(); // Standard technique
if (event.returnValue) event.returnValue = false; // IE
return false; // For handlers registered as object properties
}
Canceling the default action associated with an event is only one kind of event cancellation.
We can also cancel the propagation of events.
In browsers that support addEventListener(), the event object has a stopPropagation() method that you can invoke to prevent the continued propagation of the event. If there are other handlers defined on the same object, the rest of those handlers will still be invoked, but no event handlers on any other object will be invoked after stopPropagation() is called. The stopPropagation() method can be called at any time during event propagation. It works during the capturing phase, at the event target itself, and during the bubbling phase.
Prior to IE9, IE does not support the stopPropagation() method. Instead, the IE event object has a property named cancelBubble. Set this property to true to prevent any further propagation. IE8 and before do not support the capturing phase of event propagation, so bubbling is the only kind of propagation to be canceled.
however, when the event target is a Document or document Element, the situation is different .
Event flow describes the order in which events are received on the page. the IE and Netscape development teams came up with an almost exactly opposite concept of event flow . IE would support an event bubbling flow , whereas Netscape Communicator would support an event capturing flow.
Event Bubbling
After the event handlers registered on the target element are invoked, most events bubble up the DOM tree . The event handlers of the target’s parent are invoked . Then the handlers registered on the target’s grandparent are invoked . This continues up to the Document object, and then beyond to the Window object . Event bubbling provides an alternative to registering handlers on lots of individual document elements : instead you can register a single handler on a common ancestor element and handle events there . You might register an “change” handler on a <form> element, for example, instead of registering a “change” handler for every element in the form.
Most events that occur on document elements bubble . Notable exceptions are the focus, blur, and scroll events. The load event on document elements bubbles, but it stops bubbling at the Document object and does not propagate on to the Window object . The load event of the Window object is triggered only when the entire document has loaded .
Event bubbling is the third “phase” of event propagation. The invocation of the event handlers of the target object itself is the second phase. The first phase, which occurs even before the target handlers are invoked, is called the “capturing” phase.
Consider the following HTML document :
< html >
< head >
< title > Event Propagation < /title >
< /head >
< body >
< div id=”myDiv” > Click Me < /div >
< /body >
< /html >
When you click the < div > element in the page, the click event occurs in the following order :
1. < div >
2. < body >
3. < html >
4. document
Event Capturing
The capturing phase of event propagation is like the bubbling phase in reverse. The capturing handlers of the Window object are invoked first, then the capturing handlers of the Document object, then of the body object, and so on down the DOM tree until the capturing event handlers of the parent of the event target are invoked. Capturing event handlers registered on the event target itself are not invoked.
If the previous example is used with event capturing, clicking the < div > element fires the click event in the following order :
1. document
2. < html >
3. < body >
4. < div >
Recall that addEventListener() takes a boolean value as its third argument. If that argument is true, the event handler is registered as a capturing event handler for invocation during this first phase of event propagation.
Event bubbling is universally supported: it works in all browsers including IE, and it works for all handlers, regardless of how they are registered (unless they are registered as capturing event handlers).
Event capturing only works with event handlers registered with addEventListener() when the third argument is true. This means that event capturing is not available in IE prior to IE9 .
DOM Event Flow
The event flow specified by DOM Level 2 Events has three phases: the event capturing phase, at the target, and the event bubbling phase. Event capturing occurs first, providing the opportunity to intercept events if necessary. Next, the actual target receives the event. The final phase is bubbling, which allows a final response to the event. Considering the simple HTML example used previously, clicking the < div > fires the event in the order
1. document
2. < html >
3. < body >
In the DOM event flow, the actual target (the < div > element) does not receive the event during the capturing phase. This means that the capturing phase moves from document to < html > to < body > and stops.
4. < div >
5. < body >
6. < html >
7. document
The next phase is “ at target ,” which fires on the < div > and is considered to be part of the bubbling phase in terms of event handling . Then, the bubbling phase occurs and the event travels back up to the document.
Handler Return Value
The return value of an event handler registered by setting an object property or an
HTML attribute is sometimes significant. In general, a return value of false tells the
browser that it should not perform the default action associated with the event. The
onclick handler of a Submit button in a form, for example, can return false to prevent
the browser from submitting the form. (This is useful if the user’s input fails client-side
validation.)
In browsers that support addEventListener(), you can also cancel the default action for an event by invoking the preventDefault() method of the event object .
In IE prior to IE9, however, you do the same by setting the returnValue property of the event object to false.
Event Cancellation
The following code shows a dummy event handler that uses all three cancellation techniques:
function cancelHandler(event) {
var event = event || window.event; // For IE
/* Do something to handle the event here */
// Now cancel the default action associated with the event
if (event.preventDefault) event.preventDefault(); // Standard technique
if (event.returnValue) event.returnValue = false; // IE
return false; // For handlers registered as object properties
}
Canceling the default action associated with an event is only one kind of event cancellation.
We can also cancel the propagation of events.
In browsers that support addEventListener(), the event object has a stopPropagation() method that you can invoke to prevent the continued propagation of the event. If there are other handlers defined on the same object, the rest of those handlers will still be invoked, but no event handlers on any other object will be invoked after stopPropagation() is called. The stopPropagation() method can be called at any time during event propagation. It works during the capturing phase, at the event target itself, and during the bubbling phase.
Prior to IE9, IE does not support the stopPropagation() method. Instead, the IE event object has a property named cancelBubble. Set this property to true to prevent any further propagation. IE8 and before do not support the capturing phase of event propagation, so bubbling is the only kind of propagation to be canceled.
No comments:
Post a Comment