DOM操作-event触发顺序

最新推荐文章于 2023-06-20 11:51:14 发布

baobao214

最新推荐文章于 2023-06-20 11:51:14 发布

阅读量371

点赞数

分类专栏： javascript 文章标签： dom

本文链接：https://blog.csdn.net/baobao214/article/details/50388327

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    <div id="myDiv">
    div
        <p id="myP">p</p>
    </div>

    <script>
        var myP = document.getElementById("myP");

        myP.addEventListener("click",function(){
            alert("hellop");
        }, false);
        myP.addEventListener("click",function(){
            alert("worldp");
        }, true);
        var div = document.getElementById("myDiv");
        div.addEventListener("click",function(){
            alert("hellodiv");
        }, false);
        div.addEventListener("click",function(){
            alert("worlddiv");
        }, true);

    </script>
    </body>
</html>

点击div，弹出①hellodiv②worlddiv
点击P，弹出①worlddiv②hellop③worldp④hellodiv
当元素绑定多个事件的时候，如果元素是目标元素，目标元素的事件按顺序执行，而其他元素根据W3C的标准执行，即先捕获后冒泡。（点击div时）
如果元素不是目标元素时，则多个事件按先捕获后冒泡触发执行（点击p时）