Java Reference
In-Depth Information
Event Propagation
When you click on an element, you are actually clicking on all the elements that it is nested
in. Add the following piece of HTML to the events.htm file:
<ul id="list">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
If you click on one of the list items, you are also clicking on the <ul> element and the
<body> element. An event is said to propagate as it moves from one element to another.
Event propagation is the order that the events fire on each element. There are two forms of
event propagation: bubbling and capturing.
Bubbling is when the event fires on the element clicked on first, then bubbles up the docu-
ment tree, firing an event on each parent element until it reaches the root node.
Capturing starts by firing an event on the root element, then propagates downwards, firing
an event on each child element until it reaches the target element that was clicked on.
Bubbling
The default behavior is bubbling, which we can see happen if we add the following code to
scripts.js:
ul = document.getElementById("list");
li = document.querySelector("#list li");
ul.addEventListener("click", function(event){
console.log("Clicked on ul");
});
li.addEventListener("click", function(event){
Search WWH ::




Custom Search