Let us consider the following HTML code for our examples:
<body>
<div style="width: 100px
; height: 100px
; background-color:green"
id = "greenDiv">
<div style="width: 40px
; height:40px
;background-color:yellow"
id = "yellowDiv"> </div></div>
</body>
What if we want to change the propagation order of the triggering events.
var yellow = document.querySelector("#yellowDiv");
yellow.addEventListener("click", yellowListener);
function yellowListener(event){
console.log("clicked Yellow Square!");
}
var green = document.querySelector("#greenDiv");
green.addEventListener("click", greenListener,true);
function greenListener(event){
console.log("clicked Green Square!");
}
Now, if we want to change the order of propagation of events. then we can add the argument true to the green eventListener.
<body>
<div style="width: 100px
; height: 100px
; background-color:green"
id = "greenDiv">
<div style="width: 40px
; height:40px
;background-color:yellow"
id = "yellowDiv"> </div></div>
</body>
What if we want to change the propagation order of the triggering events.
var yellow = document.querySelector("#yellowDiv");
yellow.addEventListener("click", yellowListener);
function yellowListener(event){
console.log("clicked Yellow Square!");
}
var green = document.querySelector("#greenDiv");
green.addEventListener("click", greenListener,true);
function greenListener(event){
console.log("clicked Green Square!");
}
Now, if we want to change the order of propagation of events. then we can add the argument true to the green eventListener.
No comments:
Post a Comment