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.  
  3. <HEAD>
  4.  
  5.   <TITLE>Simulating Event Bubbling With Event Capturing</TITLE>
  6.  
  7.  
  8.  
  9.   <STYLE>
  10.  
  11.     #banner         { font-family: arial, helvetica, sans-serif;
  12.  
  13.                       font-size: 18pt; }
  14.  
  15.   </STYLE>
  16.  
  17.  
  18.  
  19.   <SCRIPT>
  20.  
  21.     eventText = "";
  22.  
  23.     capturingObject = "";
  24.  
  25.  
  26.  
  27.     function displayEvent(event)
  28.  
  29.     {
  30.  
  31.       eventText += capturingObject + " ---> ";
  32.  
  33.  
  34.  
  35.       if (event.target.constructor == Layer)
  36.  
  37.         resultLayer = document.layerResults;
  38.  
  39.       else
  40.  
  41.         resultLayer = document.linkResults;
  42.  
  43.  
  44.  
  45.       resultLayer.document.writeln("<P><TT>");
  46.  
  47.       resultLayer.document.writeln(eventText);
  48.  
  49.       resultLayer.document.writeln("</TT></P>");
  50.  
  51.       resultLayer.document.close();
  52.  
  53.     }
  54.  
  55.  
  56.  
  57.     function handleWindow(event)
  58.  
  59.     {
  60.  
  61.       // Initialize event
  62.  
  63.       cancelBubble = false;
  64.  
  65.       eventText = "";
  66.  
  67.  
  68.  
  69.       // Send event down event hierarchy
  70.  
  71.       var returnValue = routeEvent(event);
  72.  
  73.  
  74.  
  75.       // If bubble hasn't been cancelled,
  76.  
  77.       // execute window event handler code
  78.  
  79.       if (!cancelBubble)
  80.  
  81.       {
  82.  
  83.         capturingObject = "window";
  84.  
  85.         displayEvent(event);
  86.  
  87.       }
  88.  
  89.  
  90.  
  91.       // Return return value for default action
  92.  
  93.       return returnValue;
  94.  
  95.     }
  96.  
  97.  
  98.  
  99.     function handleDocument(event)
  100.  
  101.     {
  102.  
  103.       // Send event down event hierarchy
  104.  
  105.       var returnValue = routeEvent(event);
  106.  
  107.  
  108.  
  109.       // If bubble hasn't been cancelled,
  110.  
  111.       // execute window event handler code
  112.  
  113.       if (!cancelBubble)
  114.  
  115.       {
  116.  
  117.         capturingObject = "document";
  118.  
  119.         displayEvent(event);
  120.  
  121.       }
  122.  
  123.  
  124.  
  125.       // Return return value for default action
  126.  
  127.       return returnValue;
  128.  
  129.     }
  130.  
  131.  
  132.  
  133.     function handleLayer(event)
  134.  
  135.     {
  136.  
  137.       capturingObject = "layer";
  138.  
  139.       displayEvent(event);
  140.  
  141.     }
  142.  
  143.  
  144.  
  145.     function handleLink(event)
  146.  
  147.     {
  148.  
  149.       capturingObject = "link";
  150.  
  151.       displayEvent(event);
  152.  
  153.       cancelBubble = true;
  154.  
  155.     }
  156.  
  157.  
  158.  
  159.     function initialize()
  160.  
  161.     {
  162.  
  163.       window.captureEvents(Event.MOUSEOVER);
  164.  
  165.       window.onmouseover = handleWindow;
  166.  
  167.       document.captureEvents(Event.MOUSEOVER);
  168.  
  169.       document.onmouseover = handleDocument;
  170.  
  171.     }
  172.  
  173.   </SCRIPT>
  174.  
  175.  
  176.  
  177. </HEAD>
  178.  
  179.  
  180.  
  181.  
  182.  
  183. <BODY onLoad="initialize();">
  184.  
  185.  
  186.  
  187. <LAYER ID=banner onMouseOver="handleLayer(event);">
  188.  
  189.   <A HREF="home.html" onMouseOver="handleLink(event);">
  190.  
  191.     <IMG SRC="arrow.gif" ALIGN=left>
  192.  
  193.   </A>
  194.  
  195.  
  196.  
  197.   Routing Events With <TT>routeEvent()</TT>
  198.  
  199. </LAYER>
  200.  
  201.  
  202.  
  203. <BR><BR>
  204.  
  205. <BLOCKQUOTE>
  206.  
  207. <P>By passing the mouse over the title banner, a <TT>mouseOver<TT>
  208.  
  209. event is generated which is captured by the window and document
  210.  
  211. objects before being passed to the layer object.  If the mouse is
  212.  
  213. passed over the arrow link, the <TT>mouseOver</TT> event is also
  214.  
  215. captured by the window and document objects before reaching the
  216.  
  217. link object.</P>
  218.  
  219.  
  220.  
  221. <P>The following is the event path for a <TT>mouseOver</TT> event
  222.  
  223. directed at the image link element:</P>
  224.  
  225.  
  226.  
  227. <LAYER ID=linkResults></LAYER>
  228.  
  229.  
  230.  
  231. <BR><BR>
  232.  
  233. <P>And the following is the event path for a <TT>mouseOver</TT> event
  234.  
  235. directed at the banner layer:</P>
  236.  
  237.  
  238.  
  239. <LAYER ID=layerResults></LAYER>
  240.  
  241. </BLOCKQUOTE>
  242.  
  243.  
  244.  
  245. </BODY>
  246.  
  247. </HTML>
  248.  
  249.