Create ex5 UseCapture

2021-06-17 17:53:45 -04:00
parent 569185f0f4
commit 2803e96994
1 changed files with 41 additions and 0 deletions
@@ -0,0 +1,41 @@
 <!doctype html>
 <html>
 <head>
    <title>JS Tester</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            border: 1px solid black
        }
    </style>
 </head>
 <body> 
    <div class="container">
        <div class="box" id="box0">Box #1</div>
        <div class="box" id="box1">Box #2</div>
        <div class="box" id="box2">Box #3</div>
        <div class="box" id="box3">Box #4</div>
    </div> 
    <script>      
        const main = document.querySelector(".container");
        const boxes = document.querySelectorAll(".box");
        main.addEventListener("click", (e) => {
            console.log("4");
        },false);
        main.addEventListener("click", (e) => {
            console.log("1");
        },true);
        boxes.forEach(ele => {
            ele.addEventListener("click", (e) => {
                console.log("3");
            },false);
            ele.addEventListener("click", (e) => {
                console.log("2");
            },true);
        })
    </script>
 </body>
 </html>