Java Reference
In-Depth Information
},true);
li.addEventListener("click", function(event){
console.log("Clicked on li");
},true);
// bubbling
ul.addEventListener("click", function(event){
console.log("Clicked on ul");
},false);
li.addEventListener("click", function(event){
console.log("Clicked on li");
},false);
These event listeners will have to be removed separately by specifying the relevant third
argument.
Stopping the Bubbling Phase
The bubble phase can be stopped from occurring by adding the
event.stopPropagation()
method into the callback function. In the following ex-
ample, the event will fail to propagate as the third argument is
false
, which stops captur-
ing, and the
event.stopPropagation()
method is called, which stops bubbling:
li.addEventListener("click", function(event){
console.log("clicked on li");
event.stopPropagation();
}, false);
Now clicking on the first list time will only produce one alert, since the click event will not
propagate to the <ul> element.
