Skip to content

Instantly share code, notes, and snippets.

@mason-stewart

mason-stewart/Testing out this.addEventListener

Created March 4, 2011 19:45
Show Gist options
  • Save mason-stewart/855584 to your computer and use it in GitHub Desktop.
Save mason-stewart/855584 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Testing out this.addEventListener
<body id="body">
<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/>');
}
this.addEventListener(
'click', function(){ log('window? '+this) }, false);
document.addEventListener(
'click', function(){ log('document!!!!!') }, false);
document.getElementById('body').addEventListener(
'click', function(){ log('body!!!!') }, false);
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)
-->
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment