【JavaScript】学习第十四天（事件传播、阻止事件冒泡、事件委托）

最新推荐文章于 2024-03-01 16:16:02 发布

W菜菜

最新推荐文章于 2024-03-01 16:16:02 发布

阅读量1.1k

点赞数

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/wu12378900/article/details/121973713

版权

1.事件流（事件传播）概念：描述页面接收事件的顺序，事件发生时，事件会在元素节点之间按照特定的顺序，依次传播。思考：互相嵌套的div，同时给每个元素绑定了不同结果的相同事件，事件会如何传播IE提出的是冒泡流：事件开始时由最具体的元素接收，然后逐级向上到DOM顶级节点网景提出的是捕获流：事件开始时从DOM顶级节点开始，然后逐层向下传递到最具体的元素W3C规范：js事件传播流程主要有三个阶段：事件捕获阶段：从window向目标传递的过程处于目标阶段：具体点击的是谁？事件发生在目标身

摘要由CSDN通过智能技术生成

1.事件流（事件传播）

概念：
描述页面接收事件的顺序，事件发生时，事件会在元素节点之间按照特定的顺序，依次传播。

思考：
互相嵌套的div，同时给每个元素绑定了不同结果的相同事件，事件会如何传播

IE提出的是冒泡流：
事件开始时由最具体的元素接收，然后逐级向上到DOM顶级节点

网景提出的是捕获流：
事件开始时从DOM顶级节点开始，然后逐层向下传递到最具体的元素

W3C规范：
js事件传播流程主要有三个阶段：

事件捕获阶段：从window向目标传递的过程
处于目标阶段：具体点击的是谁？事件发生在目标身上
事件冒泡阶段：从目标向window传递的过程

DOM2可以支持捕获：
事件源 . addEventListener(‘事件类型’，事件处理函数，布尔true事件捕获、false事件冒泡，不写就是默认冒泡)

DOM0级不支持捕获写法
现代的浏览器在默认情况下，都是事件冒泡模型。
如果想支持事件捕获，需要用DOM2级事件来设置

2.阻止事件冒泡

为什么要阻止

很多情况下我们并不希望事件冒泡的发生。
比如当我们想实现：

点击按钮，让元素显示；
点击页面空白即（document）时让元素隐藏。

如何组止：

IE浏览器：事件对象 . cancelBubble = true
非IE浏览器阻止方式为：事件对象 . stopPropagation()

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <style>
        div {
   
            width: 200px;
            height: 200px;
            background-color: pink;
            display: none;
        }
    </style>
</head>

<body

最低0.47元/天解锁文章

W菜菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】学习第十四天（事件传播、阻止事件冒泡、事件委托）

1.事件流（事件传播）概念：描述页面接收事件的顺序，事件发生时，事件会在元素节点之间按照特定的顺序，依次传播。思考：互相嵌套的div，同时给每个元素绑定了不同结果的相同事件，事件会如何传播IE提出的是冒泡流：事件开始时由最具体的元素接收，然后逐级向上到DOM顶级节点网景提出的是捕获流：事件开始时从DOM顶级节点开始，然后逐层向下传递到最具体的元素W3C规范：js事件传播流程主要有三个阶段：事件捕获阶段：从window向目标传递的过程处于目标阶段：具体点击的是谁？事件发生在目标身
复制链接

扫一扫