tailieunhanh - JavaScript Bible, Gold Edition part 89

JavaScript Bible, Gold Edition part 89. This book will bring programmers and non-technical professionals, including casual programmers and scripters, painlessly up to speed on all aspects of mastering JavaScript. Key topics include programming fundamentals, JavaScript language elements and how to use them effectively, and how to easily and efficiently add powerful new functionality to HTML documents and Java applets. | 728 Part III Document Objects Reference Listing 29-7 is a simplified example that demonstrates how a click event aimed at a button can be both captured and allowed to bubble. Most event handling functions are assigned inside the i nit function. Borrowing code from Listing 29-5 event handlers are assigned to the window document and BODY objects as property assignments. These are automatically treated as bubble-type event listeners. Next two objects the document and a form are given capture-type event listeners for the click event. The document object event listener invokes the same function as the bubble-type event handler the alert text includes some asterisks to remind you that it is the same alert being displayed in both the capture and bubble phases of the event . For the form object however the capture-type event listener is directed to one function while a bubble-type listener for the same object is directed at a separate function. In other words the form object invokes one function as the event trickles down to the target and another function when the event starts bubbling back up. Many of the event handler functions dynamically read the eventPhase property of the event object to reveal which phase of event propagation is in force at the instance the event handler is invoked. Listing 29-7 NN6 Event Capture and Bubble HTML HEAD TITLE W3C DOM Event Propagation TITLE SCRIPT LANGUAGE JavaScript function init using old syntax to assign bubble-type event handlers winEvent docEvent docBodEvent turn on click event capture for two objects click docEvent true Q .addEventListener click formCaptureEvent true set event listener for bubble Q .addEventListener click formBubbleEvent false function winEvent evt alert Event is now at the window object level getPhase evt . function docEvent evt alert Event is now at the document object level getPhase evt . function .