DOM操作-event触发顺序

来源：互联网发布：hello world程序python 编辑：程序博客网时间：2024/06/05 04:23

<!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时）

0 0