DOM事件流-冒泡阶段捕获阶段

    科技2022-07-12  123

    DOM事件流

    事件流描述的是从页面中接受事件的顺序

    事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流

    DOM事件分为三个阶段:

    捕获阶段当前目标阶段冒泡阶段

    注意:

    JS代码中只能执行捕获或者冒泡其中的一个阶段onclick 和 attachEvent(ie) 只能得到冒泡阶段捕获阶段:如果addEventListener 的第三个参数为true 则为捕获阶段,参数为false或者省略 则为冒泡阶段实际开发中很少使用事件捕获,我们更关注事件冒泡有些事件是没有冒泡的,比如:onblur、onfocus、onmouseenter、onmouseleave

    document->html->->body->father->son,

    因此下面的代码会先弹出father再弹出son

    <body> <div class="father"> <div class="son"></div> </div> <script> var son = document.querySelector(".son"); son.addEventListener( "click", function () { alert("son"); }, true ); var father = document.querySelector(".father"); son.addEventListener( "click", function () { alert("father"); }, true ); </script> </body>

    冒泡阶段:如果addEventListener 的第三个参数为false或者省略 则为冒泡阶段 son->father->body->html->document 因此下面的代码会先弹出son再弹出father最后弹出document

    var son = document.querySelector(".son"); son.addEventListener( "click", function () { alert("son"); }, false ); var father = document.querySelector(".father"); son.addEventListener( "click", function () { alert("father"); }, false ); document.addEventListener("click", function () { alert("document"); });
    Processed: 0.010, SQL: 8