<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>events_1</title>
</head>
<body>
  <h1>Making stuff happen: the simple example</h1>

  <h2>Inline event registration - works in all browsers since Netscape 2 (Don't use it)</h2>
  <a href="nowhere.html" onclick="alert('I was clicked'); return false;">Click me</a>
    
  <!-- 
    return false; prevents the default action from taking place - in this case following the link to nowhere.html
    
    Using inline event registration intermingles behavior and markup - which should be kept seperate
  -->
 

  <h2>Setting an event handler directly in JavaScript</h2>
  <a href="nowhere2.html" id="link2">Click me</a>
  <script type="text/javascript" charset="utf-8">
    // this demonstrates a cross-browser programtic way of registering an event.
    // The biggest drawback with setting an event handler directly is that it clobbers any other event handlers previously defined in the same way
    
    var link2 = document.getElementById("link2");
    link2.onclick = function(e) { 
      alert("Link 2 was clicked");
      return false;
    }
  </script>
  
  <h1>Event bubbling / capturing</h1>
  <p>
    Events don't live in a vacuum, so if you click on a page with just one div, a click event will fire for the div and the document containing it. The order that those events happen in is either Bubbling (start at the element and move upwards) or Capture (from the highest element down to the element that caused the event)
  </p>
  <p>
    In IE, events always bubble. The W3C specification for Events lets your choose in which order you'd like to observe events.
  </p>
  
  <div id="wrap">
    <div id="inner_div">Click me for event bubbling</div>
  </div>
  
  <script type="text/javascript" charset="utf-8">
    document.getElementById("inner_div").addEventListener("click", function(e) { alert("Link clicked"); }, false);
    document.getElementById("wrap").addEventListener("click", function(e) { alert("Div clicked"); }, false);
  </script>
  
  <div id="wrap2">
    <div id="inner_div2">Click me for event capture</div>
  </div>
  
  <script type="text/javascript" charset="utf-8">
    document.getElementById("inner_div2").addEventListener("click", function(e) { alert("Link clicked"); }, true);
    document.getElementById("wrap2").addEventListener("click", function(e) { alert("Div clicked"); }, true);
  </script>
  

</body>
</html>