What is DOM capture ?

जैसा की हम लोग जानते हैं की addEventListener method में 3 parameter का use किया जाता है।
1 . event 2 .function 3 . capture

Note: Capture में true / false value का use किया जाता है

Syntax with Capture :

attributename.addEventListener("event_name", function, true/false)

Example with Capture


                            
                              HTML Code                             
                              <style type="text/css">
.box1{
border:solid 5px orange;
width:500px;
padding:35px;
background:darkblue;
color:#fff; 
}
.box2{
border:solid 5px orange; 
padding:35px;
background:blue; 
}
.box3{
border:solid 5px orange;
padding:35px;
height:200px;
background:white;
color:black; 
}
</style>
<style type="text/css">
.box1{
border:solid 5px orange;
width:500px;
padding:35px;
background:darkblue;
color:#fff; 
}
.box2{
border:solid 5px orange; 
padding:35px;
background:blue; 
}
.box3{
border:solid 5px orange;
padding:35px;
height:200px;
background:white;
color:black; 
}
</style>
<div class="box1">
First Box
<div class="box2">Second Box
<div class="box3">
Third Box
</div>
</div>
</div>
                            
                             
                               Javascript Code 
                              with flase value
                             
                            <script type="text/javascript">
var a = document.querySelector(".box1").addEventListener("click", myfunc1, false);
var b = document.querySelector(".box2").addEventListener("click", myfunc2 , false);
var c = document.querySelector(".box3").addEventListener("click", myfunc3, false);
                            function myfunc1(){
alert("This first function")
}
function myfunc2(){
alert("This Second function")
}
function myfunc3(){
alert("This Third function")
}

</script>

Output code in Cons

click third box then see
First Box Second Box Third Box


                            
                               Javascript Code 
                              with true value
                             
                            <script type="text/javascript">
var a = document.querySelector(".box1").addEventListener("click", myfunc1, true);
var b = document.querySelector(".box2").addEventListener("click", myfunc2 , true);
var c = document.querySelector(".box3").addEventListener("click", myfunc3, true);
                            function myfunc1(){
alert("This first function")
}
function myfunc2(){
alert("This Second function")
}
function myfunc3(){
alert("This Third function")
}

</script>

Output code in Cons

click third box then see
First Box Second Box Third Box