JS Masterclass Ex 8

1.html

<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/>');
  }

  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);
</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)
-->

2.html

<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/>');
  }

  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);
</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)
-->

3.html

<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/>');
  }

  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(event){
      event = event || window.event;
      log('the_item!');
      event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
    },
    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)
-->