TOC PREV NEXT INDEX

Put your logo here!


Example 5: Event Propagation

This example demonstrates how events fire and are handled in the DOM in a very simple way. When the BODY of this HTML document loads, an event listener is registered with the top row of the TABLE. The event listener handles the event by executing the function l_func, which changes the value in the bottom cell of the table.

However, l_func also calls an event object method, stopPropagation, which keeps the event from bubbling any further up into the DOM. Note that the table itself has an onclick event handler that ought to display a message when the table is clicked. But the l_func method has stopped propagation, and so after the data in the table is updated, the event phase is effectively ended.

<html> 
<head> 
  <style> 
    #t-daddy { border: 1px solid red } 
    #t1 { background-color: pink; } 
  </style> 
  <script> 
  function l_func(e) { 
    t2 = document.getElementById("t2"); 
    t2.innerHTML = "three"; 
    e.stopPropagation();  
    // this ought to keep t-daddy from getting the click.  
  } 
 
  function load() { 
    el = document.getElementById("t"); 
    el.addEventListener("click", l_func, false); 
  } 
  </script> 
</head> 
<body onload="load();"> 
<table id="t-daddy" onclick="alert('hi');"> 
  <tr id="t"> 
     <td id="t1">one</td> 
  </tr> 
  <tr><td id="t2">two</td></tr> 
</table> 
</body> 
</html> 


mozilla.org | mailto:oeschger | bug 93108
TOC PREV NEXT INDEX