The Document Object Model (DOM) is very import concept. W3C gives a standard answer of what is DOM.
The W3C Document Object Model (DOM) is a platform and language-neutral interface
that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
DOM has 3 parts: Core DOM, XML DOM and HTML DOM. This post only discusses HTML DOM,
which can be used by javascript to add, get, change, and delete HTML element.
(ps: It sounds very RESTful)
The code above is a very classic sample website. The HTML DOM tree with window object shows as the figure below.
fig 1. HTML DOM tree with window object
Event Propagate
Since the event listener only can be bound to an element, the HTML DOM tree figure will simplify as below.
fig 2. HTML DOM tree simplify
Assuming I click span tag. A click event is fired by window object.
The event goes through every node in the path.
We call it Event Capturing Phase.
After the event reaches the target note, the event will pass back to the window object.
We call it Event Bubbling Phase.
To test Event Capturing Phase and Event Bubbling Phase,
I use the addEventListener() function.
Let's look at the code below.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#234;}
</style>
</head>
<body>
<h1 id="title" >title</h1>
<div>
<span class="funny" >span</span>
</div>
<script>
var bdTag = document.getElementsByTagName("body")[0];
var spTag = document.getElementsByTagName("span")[0];
bdTag.addEventListener("click", function(){
console.log("body tag catches click event");
}, true); // event is catched in the capturing phase
spTag.addEventListener("click", function(){
console.log("span tag catches click event");
});
window.addEventListener("click", function(){
console.log("window object catches click event")
});
</script>
</body>
</html>
When I click span,
the output would be body -> span -> window
body tag catches click event
span tag catches click event
window object catches click event
fig 3-1. HTML DOM tree 3-1
If I modified the code to
........
<script>
var bdTag = document.getElementsByTagName("body")[0];
var spTag = document.getElementsByTagName("span")[0];
bdTag.addEventListener("click", function(){
console.log("body tag catches click event");
}); // catch event in bubbling phase
spTag.addEventListener("click", function(){
console.log("span tag catches click event");
});
window.addEventListener("click", function(){
console.log("window object catches click event")
});
</script>
........
This time the output would be span -> body -> window
span tag catches click event
body tag catches click event
window object catches click event
fig 3-2. HTML DOM tree 3-2
Stop Event Propagate
If I want a tag to capture an event and stop the event propagation, I can use event.stopPropagation() to stop the event.
........
<script>
var bdTag = document.getElementsByTagName("body")[0];
var spTag = document.getElementsByTagName("span")[0];
bdTag.addEventListener("click", function(){
console.log("body tag catches click event");
});
spTag.addEventListener("click", function(event){
console.log("span tag catches click event");
event.stopPropagation();
});
window.addEventListener("click", function(){
console.log("window object catches click event")
});
</script>
........
At this situation, when I click span tag, it only outputs one line and stops the click event propagation.
