home *** CD-ROM | disk | FTP | other *** search
/ Dynamic HTML Construction Kit / Dynamic HTML Construction Kit.iso / source_code / dhtmlunl / dhtml.exe / CD Content / Chap17 / dun17_4.txt < prev    next >
Encoding:
Text File  |  1997-12-18  |  3.1 KB  |  125 lines
  1. <HTML>
  2. <HEAD>
  3.   <TITLE>Simulating Event Bubbling With Event Capturing</TITLE>
  4.  
  5.   <STYLE>
  6.     #banner         { font-family: arial, helvetica, sans-serif;
  7.                       font-size: 18pt; }
  8.   </STYLE>
  9.  
  10.   <SCRIPT>
  11.     eventText = "";
  12.     capturingObject = "";
  13.  
  14.     function displayEvent(event)
  15.     {
  16.       eventText += capturingObject + " ---> ";
  17.  
  18.       if (event.target.constructor == Layer)
  19.         resultLayer = document.layerResults;
  20.       else
  21.         resultLayer = document.linkResults;
  22.  
  23.       resultLayer.document.writeln("<P><TT>");
  24.       resultLayer.document.writeln(eventText);
  25.       resultLayer.document.writeln("</TT></P>");
  26.       resultLayer.document.close();
  27.     }
  28.  
  29.     function handleWindow(event)
  30.     {
  31.       // Initialize event
  32.       cancelBubble = false;
  33.       eventText = "";
  34.  
  35.       // Send event down event hierarchy
  36.       var returnValue = routeEvent(event);
  37.  
  38.       // If bubble hasn't been cancelled,
  39.       // execute window event handler code
  40.       if (!cancelBubble)
  41.       {
  42.         capturingObject = "window";
  43.         displayEvent(event);
  44.       }
  45.  
  46.       // Return return value for default action
  47.       return returnValue;
  48.     }
  49.  
  50.     function handleDocument(event)
  51.     {
  52.       // Send event down event hierarchy
  53.       var returnValue = routeEvent(event);
  54.  
  55.       // If bubble hasn't been cancelled,
  56.       // execute window event handler code
  57.       if (!cancelBubble)
  58.       {
  59.         capturingObject = "document";
  60.         displayEvent(event);
  61.       }
  62.  
  63.       // Return return value for default action
  64.       return returnValue;
  65.     }
  66.  
  67.     function handleLayer(event)
  68.     {
  69.       capturingObject = "layer";
  70.       displayEvent(event);
  71.     }
  72.  
  73.     function handleLink(event)
  74.     {
  75.       capturingObject = "link";
  76.       displayEvent(event);
  77.       cancelBubble = true;
  78.     }
  79.  
  80.     function initialize()
  81.     {
  82.       window.captureEvents(Event.MOUSEOVER);
  83.       window.onmouseover = handleWindow;
  84.       document.captureEvents(Event.MOUSEOVER);
  85.       document.onmouseover = handleDocument;
  86.     }
  87.   </SCRIPT>
  88.  
  89. </HEAD>
  90.  
  91.  
  92. <BODY onLoad="initialize();">
  93.  
  94. <LAYER ID=banner onMouseOver="handleLayer(event);">
  95.   <A HREF="home.html" onMouseOver="handleLink(event);">
  96.     <IMG SRC="arrow.gif" ALIGN=left>
  97.   </A>
  98.  
  99.   Routing Events With <TT>routeEvent()</TT>
  100. </LAYER>
  101.  
  102. <BR><BR>
  103. <BLOCKQUOTE>
  104. <P>By passing the mouse over the title banner, a <TT>mouseOver<TT>
  105. event is generated which is captured by the window and document
  106. objects before being passed to the layer object.  If the mouse is
  107. passed over the arrow link, the <TT>mouseOver</TT> event is also
  108. captured by the window and document objects before reaching the
  109. link object.</P>
  110.  
  111. <P>The following is the event path for a <TT>mouseOver</TT> event
  112. directed at the image link element:</P>
  113.  
  114. <LAYER ID=linkResults></LAYER>
  115.  
  116. <BR><BR>
  117. <P>And the following is the event path for a <TT>mouseOver</TT> event
  118. directed at the banner layer:</P>
  119.  
  120. <LAYER ID=layerResults></LAYER>
  121. </BLOCKQUOTE>
  122.  
  123. </BODY>
  124. </HTML>
  125.