javascript 捕获和冒泡

<!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)

    // 捕获（由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('第二')
    }

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

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


</script>
</body>
</html>
javascript 捕获和冒泡

猜你喜欢
