gistfile1.erb

  <div id="the_div">
    <ul id="the_list">
      <li id="the_item">Click me!</li>
    </ul>
  </div>

  <p id="log"></p>

  <script type="text/javascript" charset="utf-8">
    function log(string){
      document.getElementById('log').innerHTML += (string + '<br/>');
    }
    
    // 1. Change the addEventListener calls so that the events occur in the following order.      
    //    the_div! the_item! the_list!
    
    document.getElementById('the_div').addEventListener('click', function(){ log('the_div!') }, true);
    document.getElementById('the_list').addEventListener('click', function(){ log('the_list!') }, false);
    document.getElementById('the_item').addEventListener('click', function(){ log('the_item!') }, true);

    // 2. Change the addEventListener calls so that the events occur in the following order.      
    //    the_item! the_list! the_div!
    
    document.getElementById('the_div').addEventListener('click', function(){ log('the_div!') }, false);
    document.getElementById('the_list').addEventListener('click', function(){ log('the_list!') }, false);
    document.getElementById('the_item').addEventListener('click', function(){ log('the_item!') }, false);


    // 3. Change the addEventListener calls so that the events occur in the following order.      
    //    the_item! (no other events)
    
    document.getElementById('the_div').addEventListener('click', function(){ log('the_div!') }, false);
    document.getElementById('the_list').addEventListener('click', function(){ log('the_list!') }, false);
    document.getElementById('the_item').addEventListener('click', function(e){ 
      log('the_item!');
      e.stopPropagation();
    }, false);

  </script>