javascript 捕获和冒泡

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 58 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/nigori/p/10765025.html

文章标签：

#javascript #ViewUI

本文深入解析了DOM事件流的概念，包括捕获阶段和冒泡阶段的事件传递机制，并通过具体的HTML和JavaScript代码示例，展示了如何利用addEventListener方法来区分和处理不同阶段的事件。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1,
        .box2 {
            width: 200px;
            height: 200px;
            background-color: orange;
            margin: 50px auto;
            overflow: hidden;
        }

        .box1 div,
        .box2 div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 20px auto;
        }
    </style>
</head>
<body>
<div class="box1">
    <div></div>
</div>
<div class="box2">
    <div></div>
</div>
<script>

    // DOM 事件流(描述的是从页面中接收事件的顺序） 捕获(true) 处理 冒泡(false)


    // 冒泡 (由element 向上开始传递
    //      例如（父亲和里面的儿子都有点击事件 ，当点击儿子触发事件时 ，
    //          儿子先接收到事件 先执行 》 父亲后接收到事件,后执行）

    var box1 = document.querySelector('.box1');
    var box11 = box1.querySelector('div');
    box1.addEventListener('click', f, false);  // false  表示冒泡 （默认 可以省略）
    box11.addEventListener('click', f1, false);  // 冒泡 即 由小(element)到大(document)

    // 捕获（由document 向下开始传递
    //     例如（父亲和里面的儿子都有点击事件 ，当点击儿子触发事件时 ，
    //          父亲先接收到事件 先执行》儿子后接收到事件，后执行）
    var box2 = document.querySelector('.box2');
    var box22 = box2.querySelector('div');
    box2.addEventListener('click', f, true);  // true  表示捕获
    box22.addEventListener('click', f1, true);  // 捕获 由大到小 即：document 到element

    // 处理 ( 先接收到的对象先处理 即：执行
    function f() {    // 使用阻止冒泡 时 传入参数 e ；
        alert('第一');
        // e.stopPropagation();  //标准（阻止冒泡 停止传播的意思
        // e.cancelBubble  = true;  // 非标准 （IE6-8 取消冒泡
    }

    function f1() {
        alert('第二')
    }

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