Event Order Example

It shows browser reaction when event fired.

by ipark

HTML

<div id="outer">
  Outer
  <div id="inner">
    Inner
  </div>
</div>

<label>Result Area</label>
<p id="result"></p>

CSS

div {
  padding: 10px;
  margin: 20px;
  color: white;
}

#outer {
  background-color: #334455;
}

#inner {
  background-color: #AAA;
}

label {
  font-weight: bolder;
}

#result {
  background-color: #DDD;
  padding: 10px;
  maring: auto 10px;
  min-height: 200px;
}

JavaScript

var outer = document.querySelector("#outer"),
    inner = document.querySelector("#inner"),
    result = document.querySelector("#result");

outer.addEventListener("click", function(e) {
	result.innerHTML += "<br/> Outer Clicked!";
}, false);

inner.addEventListener("click", function(e) {
	result.innerHTML += "<br/> Inner Clicked!";
}, false);