DOM events exercise

05_dom_events.html

<p>1. Change the addEventListener calls so that the events occur in the following order.<br/>    
the_div! the_item! the_list!</p>
<div id="the_div">
  <ul id="the_list">
    <li id="the_item">Click me! 1</li>
  </ul>
</div>
<p>2. Change the addEventListener calls so that the events occur in the following order.<br/>  
 the_item! the_list! the_div!</p>
<div id="the_div2">
  <ul id="the_list2">
    <li id="the_item2"2>Click me! 2</li>
  </ul>
</div>
<p>3. Change the addEventListener calls so that the events occur in the following order.<br/>
   the_item! (no other events)</p>
<div id="the_div3">
  <ul id="the_list3">
    <li id="the_item3">Click me! 3</li>
  </ul>
</div>

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

<script type="text/javascript" charset="utf-8">
  function log(string){
    document.getElementById('log').innerHTML += (string + '<br/>');
  }
//////// 1
  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(e){ log('the_item!'); }, true);
//////// 2
  document.getElementById('the_div2').addEventListener(
    'click', function(){  log('the_div!'); }, false);

  document.getElementById('the_list2').addEventListener(
    'click', function(){  log('the_list!'); }, false);   

  document.getElementById('the_item2').addEventListener(
    'click', function(e){ log('the_item!'); }, true);
//////// 3
  document.getElementById('the_div3').addEventListener(
    'click', function(){  log('the_div!'); }, false);

  document.getElementById('the_list3').addEventListener(
    'click', function(){  log('the_list!'); }, false);   

  document.getElementById('the_item3').addEventListener(
    'click', function(e){ log('the_item!'); e.stopPropagation() }, false);
</script>

<!--
   1. Change the addEventListener calls so that the events occur in the following order.      
      the_div! the_item! the_list!
   2. Change the addEventListener calls so that the events occur in the following order.      
      the_item! the_list! the_div!
   3. Change the addEventListener calls so that the events occur in the following order.      
      the_item! (no other events)
-->