js DOM事件流

最新推荐文章于 2022-11-01 17:47:07 发布

wyw223

最新推荐文章于 2022-11-01 17:47:07 发布

阅读量565

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/wyw223/article/details/86619360

版权

javascript 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。
1.事件冒泡（推荐）

IE的事件流称为事件冒泡。
即：事件由最具体的元素接收(div)，逐级向上传播到不具体的节点(document)。

当我们点击代码片段一中id为box的div块时，单击事件会按照如下顺序传播：
div ——> body——> html ——> document

在这里插入图片描述
如上图所示，click首先在div元素上发生，然后沿着Dom树向上传播，每一级节点都会发生直至传播到document对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
</head>
<style type="text/css">
    #box1{
        width: 300px;
        height: 300px;
        background-color: red;
    }
    #box2{
        width: 200px;
        height: 200px;
        background-color: yellow;
    }
    #box3{
        height: 100px;
        width: 100px;
        background-color: green;
    }
</style>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
</body>
<script type="text/javascript">
    document.getElementById('box1').onclick = function () {
        console.log('box1 click')
    }
    document.getElementById('box2').onclick = function () {
        console.log('box2 click')
    }

    document.getElementById('box3').onclick = function () {
        console.log('box3 click')
    }
</script>
</html>

在这里插入图片描述
2.事件捕获
Netscape提出的事件流模型称为事件捕获。
即：事件从最不具体的节点开始接收（document），传递至最具体的节点 div 和IE的冒泡刚好相反，事件捕获的本意是当事件到达预定目标前捕获它。

当我们点击代码片段一中id为box的div块时，单击事件会按照如下顺序传播：
document——> html ——> body ——> div
在这里插入图片描述
3.DOM2级事件流
为了能够兼容上述两种事件模型，又提出了一个DOM2级事件模型，它规定了事件流包含三个阶段：

事件捕获阶段：为事件捕获提供机会；

处于目标阶段：事件的目标接收到事件（但并不会做出响应）；

事件冒泡阶段：事件响应阶段；

第一阶段：从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）。
第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。
第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM2级事件流</title>
</head>
<style type="text/css">
    #box1{
        width: 300px;
        height: 300px;
        background-color: red;
    }
    #box2{
        width: 200px;
        height: 200px;
        background-color: yellow;
    }
    #box3{
        height: 100px;
        width: 100px;
        background-color: green;
    }
</style>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    var box3 = document.getElementById('box3');
    // true表示在捕获阶段处理事件、false表示在冒泡阶段处理
    box1.addEventListener('click',function () {
        console.log('事件捕获阶段触发box1点击事件');
    }, true);
    box1.addEventListener('click',function () {
        console.log('事件冒泡阶段触发box1点击事件');
    }, false);
    box2.addEventListener('click',function () {
        console.log('事件捕获阶段触发box2点击事件');
    }, true);
    box2.addEventListener('click',function () {
        console.log('事件冒泡阶段触发box2点击事件');
    }, false)
    box3.addEventListener('click',function () {
        console.log('事件捕获阶段触发box3点击事件');
    }, true);
    box3.addEventListener('click',function () {
        console.log('事件冒泡阶段触发box3点击事件');
    }, false)
</script>
</html>

在这里插入图片描述

wyw223

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js DOM事件流

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。1.事件冒泡（推荐）IE的事件流称为事件冒泡。即：事件由最具体的元素接收(div)，逐级向上传播到不具体的节点(document)。当我们点击代码片段一中id为box的div块时，单击事件会按照如下顺序传...
复制链接

扫一扫