DOM事件流详解

最新推荐文章于 2024-08-20 17:01:17 发布

敗给了忧伤

最新推荐文章于 2024-08-20 17:01:17 发布

阅读量1.5k

点赞数 1

分类专栏：前端文章标签： javascript dom 浏览器

本文链接：https://blog.csdn.net/qq_32300363/article/details/53444761

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

什么是DOM事件

简单的说，事件就是定义了一些JavaScript函数，使它们能够响应页面元素发生的变化，比如用户在元素上方点击了鼠标按钮 [click事件],用户把鼠标移到了元素上方[mouseover事件]。

什么是DOM事件流

一个事件的生命周期有三个阶段：捕捉，目标，冒泡。

1.捕捉阶段
当某个事件被触发时，浏览器会找到涉及的元素。涉及的元素称为目标。浏览器会找出body元素和目标之间所有的元素并分别检查它们，看其有没有事件绑定。浏览器会先触发外层事件的处理器，最后才会轮到目标的事件处理器。

2.目标阶段
当捕捉阶段完成后，浏览器会触发目标元素上任何已添加的事件类型监听器，这里的先后顺序是按照事件定义的先后顺序来的。

3.冒泡阶段
冒泡阶段的顺序与捕捉阶段的顺序刚好相反，在此阶段，浏览器会优先处理目标的事件处理器，然后一层层往外处理其余的事件处理器。

示例

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>DOM事件流</title>
</head>
<body>
    <div id="div1">
        <button id="btn">按钮</button>
    </div>
<script>
    var btn = document.getElementById("btn");
    var div1 = document.getElementById("div1");

    //事件目标
    btn.onclick = function(){
        console.debug("目标1.Click btn");
    }
    btn.addEventListener("click",function(){
        console.debug("目标2.Click btn");
    },true);

    //事件冒泡
    div1.onclick = function(){
        console.debug("冒泡1.Click div1");
    }
    document.body.onclick = function(){
        console.debug("冒泡2.Click Body");
    }
    document.onclick = function(){
        console.debug("冒泡3.Click document");
    }
    window.onclick = function(){
        console.debug("冒泡4.Click window");
    }

    //事件捕获
    window.addEventListener("click",function(){
        console.debug("捕获4.Click window");
    },true);
    document.addEventListener("click",function(){
        console.debug("捕获3.Click document");
    },true);
    document.body.addEventListener("click",function(){
        console.debug("捕获2.Click body");
    },true);
    div1.addEventListener("click",function(){
        console.debug("捕获1.Click div1");
    },true);

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

document.body.addEventListener("click",function(){
        console.debug("捕获2.Click body");
    },true);

addEventListener用于注册事件的处理器，当添加了第三个参数为true时，代表了在捕捉阶段接受后代元素的事件。

点击button按钮后，结果如下

event.html:38 捕获4.Click window
event.html:41 捕获3.Click document
event.html:44 捕获2.Click body
event.html:47 捕获1.Click div1
event.html:16 目标1.Click btn
event.html:19 目标2.Click btn
event.html:24 冒泡1.Click div1
event.html:27 冒泡2.Click Body
event.html:30 冒泡3.Click document
event.html:33 冒泡4.Click window