JavaScript事件触发顺序（DOM0 和DOM2）_dom0级和dom2级的优先级-优快云博客

本文链接：https://blog.youkuaiyun.com/xiongshiyuan/article/details/80037488

本文探讨了DOM0级和DOM2级事件的触发顺序。在DOM0级事件中，事件从被点击元素冒泡向上。而在DOM2级事件中，通过addEventListener设置true参数可使事件在捕获阶段触发，且冒泡和捕获阶段可分别调用不同处理函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
    <head>
        <title>事件捕获顺序测试</title>
        <meta charset="utf-8">
        <style text="txt/css">
            div{
                border:1px solid red;
                padding:20px;
            }
        </style>
    </head>
    <body>
        <div onclick="alert(1)">
            onclick 输出1
            <div onclick="alert(2)">
                onclick 输出2
                <div onclick="alert(3)">
                    onclick 输出3
                    (DOM0级事件)
                </div>
            </div>
        </div>
        <hr>
        <div id="1">
            click 输出1
            <div id="2">
                click 输出2
                <div id="3">
                    click 输出3
                    （DOM2级事件处理）
                </div>
            </div>
        </div>
        <script>
            var div1=document.getElementById("1");
            var div2=document.getElementById("2");
            var div3=document.getElementById("3");
            div1.addEventListener("click",function(){
                alert("1");
            },true);
            div1.addEventListener("click",function(){
                alert("4");
            });
            div2.addEventListener("click",function(){
                alert("2");
            });
            div3.addEventListener("click",function(){
                alert("3");
            },true);
        </script>
    </body>
</html>