事件冒泡-捕获/

最新推荐文章于 2023-11-01 10:58:14 发布

喵帕斯_喵太

最新推荐文章于 2023-11-01 10:58:14 发布

阅读量67

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/116303167

版权

javascript 专栏收录该内容

58 篇文章 2 订阅

订阅专栏

01-事件冒泡捕获

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        // 给document添加事件
        document.addEventListener('click', function () {
            console.log('document的冒泡事件')
        }, false)

        document.addEventListener('click', function (e) {
            console.log('document的捕获事件')
            // 阻止事件流转：到此结束
            e.stopPropagation()
        }, true)

        // 给window添加事件

        // on事件只有冒泡，没有捕获
        window.onclick = function () {
            console.log('window的冒泡事件')
        }

        // 添加捕获事件：addEventListener(,,true)
        // true：表示捕获阶段触发
        // false：默认，表示冒泡阶段触发
        window.addEventListener('click', function (e) {
            console.log('window的捕获事件')


        }, true)

        // 事件捕获：父子拥有相同的事件（捕获阶段触发），会从window对象开始，一层层往下，直到发生的目标（子元素）

        // 证明
        document.querySelector('.box').onclick = function () {
            console.log('没有一个人是无辜的')
        }


        let box = document.querySelector('.box')

        box.addEventListener('click', function () {
            console.log('这是目标的捕获事件')
        }, true)

        // 谷歌浏览器：以前是不区分目标事件的捕获和冒泡的：谁先写的代码就先执行谁（未来：可以预测的时候 最终元素即使是目标阶段：应该也会先捕获，后冒泡）
    </script>
</body>

</html>

注意：
1.// 添加捕获事件：addEventListener(,true)
// true：表示捕获阶段触发
// false：默认，表示冒泡阶段触发
2.事件捕获：父子拥有相同的事件（捕获阶段触发），会从window对象开始，一层层往下，直到发生的目标（子元素）

喵帕斯_喵太

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件冒泡-捕获/

01-事件冒泡捕获<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
复制链接

扫一扫