jsmc_exercise2.html

<!-- 1. -->
<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>

<!-- 2. -->
<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>

<!-- 3. -->
<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(e){ log('the_item!'); e.stopPropagation();  }, false);
</script>