[html]事件处理addEventListener详解

﹏ヽ暗。殇╰゛Y 2022-08-05 07:38 264阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>事件处理addEventListener详解</title>
        <style>
        .div1 {
            background-color: rgba(0, 0, 0, .3);
            width: 400px;
            height: 400px;
        }
        
        .div2 {
            background-color: rgba(0, 0, 0, .4);
            width: 300px;
            height: 300px;
        }
        
        .div3 {
            background-color: rgba(0, 0, 0, .5);
            width: 200px;
            height: 200px;
        }
        </style>
        <script>
        function initapp() {
            var el1 = document.getElementById('div1');
            var el2 = document.getElementById('div2');
            var el3 = document.getElementById('div3');
            var useCapture = false;
            // 是否使用捕获：true-使用捕获,false-使用冒泡(目前普遍使用的方式)
            // 使用捕获:从根节点开始自上而下，检测每个节点是否注册了事件监听器。如果注册了并且 useCapture为true，则执行。
            // 使用冒泡：从目标节点自下而上到根节点，检测每个节点是否注册了事件监听器。如果注册了并且 useCapture为false，则执行。
            // 自上而下路径:Window->document->html->body->xxx
            // useCapture = false; 点击div3时控制台打印：DIV#div3 DIV#div2 DIV#div1 HTML#
            // useCapture = true;  点击div3时控制台打印：HTML# DIV#div1 DIV#div2 DIV#div3
            el1.addEventListener('click', myclick, useCapture);
            el2.addEventListener('click', myclick, useCapture);
            el3.addEventListener('click', myclick, useCapture);
            document.getElementsByTagName('html')[0].addEventListener('click', myclick, useCapture);
            //window.addEventListener('click', myclick, useCapture);
        }
    
        function myclick(event) {
            //event 触发的点击事件
            //this 当前节点
            console.log(this.tagName + "#" + this.id);
            //event.preventDefault();
            //event.stopPropagation();//阻止传播,若useCapture=false为阻止向上冒泡，否则为阻止向下传播
        }
        </script>
    </head>
    
    <body οnlοad="initapp()">
        <div id="div1" class="div1">div1
            <div id="div2" class="div2">div2
                <div id="div3" class="div3">div3</div>
            </div>
        </div>
    </body>
    
    </html>