DOM Enlightenment Book

by peroli

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<button>Click Me</button>

JavaScript

//first event attached
document.querySelector('button').addEventListener('click', function () {
  console.log('I get invoked because I was attached first');
}, false);

//seond event attached
document.querySelector('button').addEventListener('click', function (event) {
  console.log('I get invoked, but stop any other click events on this target');
  event.stopImmediatePropagation();
}, false);

//third event attached, but because stopImmediatePropagation() was called above this event does not get invoked
document.querySelector('button').addEventListener('click', function () {
  console.log('I get stopped from the previous click event listener');
}, false);

//notice that the event flow is also cancelled as if stopPropagation was called too
document.body.addEventListener('click', function () {
  console.log('What, denied me from being invoked!');
}, false);