有关JS事件流实验

本文通过构建多层级的HTML元素并运用不同的JavaScript事件监听方式,详细解析了DOM事件流的捕获阶段、目标阶段和冒泡阶段。展示了如何使用jQuery和原生JavaScript添加事件监听器,并观察事件触发的顺序,帮助理解DOM事件机制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!-- 这是关于DOM事件流 -->
<!DOCTYPE html>
<html>
<head>
    <style>
        #box1,#box4,#box7,#box10{
           background-color: brown;
           height:300px;
           width:300px; 
        }
        #box2,#box5,#box8,#box11{
            background-color: aqua;
            height:200px;
            width:200px;
        }
        #box3,#box6,#box9,#box12{
            background-color:blueviolet;
            height:100px;
            width:100px;
        }
        
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
</head>
<body>
    <div id="box1">
        1
        <div id="box2">
            2
            <div id="box3">
                3
            </div>
        </div>
    </div>
</br>
    <div id="box4">
        4
        <div id="box5">
            5
            <div id="box6">
                6
            </div>
        </div>
    </div>
</br>
    <div id="box7">
        7
        <div id="box8">
            8
            <div id="box9">
                9
            </div>
        </div>
    </div>
</br>
    <div id="box10">
        10
        <div id="box11">
            11
            <div id="box12">
                12
            </div>
        </div>
    </div>
</body>
<script>
    $("#box1").click(function(){
        console.log('box1');
    }); 
    $("#box2").click(function(){
        console.log('box2');
    });
    $("#box3").click(function(){
        console.log('box3');
    });
    // DOM0级,因为冒泡,所以box3->box2->box1

    $box4 = document.getElementById("box4");
    $box5 = document.getElementById("box5");
    $box6 = document.getElementById("box6");
    $box4.addEventListener('click',function(){
        console.log('box4');
    },false);
    $box5.addEventListener('click',function(){
        console.log('box5');
    },false);
    $box6.addEventListener('click',function(){
        console.log('box6');
    },false);
    //DOM2级,设置为冒泡

    $box7 = document.getElementById("box7");
    $box8 = document.getElementById("box8");
    $box9 = document.getElementById("box9");
    $box7.addEventListener('click',function(){
        console.log('box7');
    },true);
    $box8.addEventListener('click',function(){
        console.log('box8');
    },true);
    $box9.addEventListener('click',function(){
        console.log('box9');
    },true);
    //DOM2,设置为了捕获

    /*从10,11,12中验证捕获玉冒泡问题*/
    $box10 = document.getElementById("box10");
    $box11 = document.getElementById("box11");
    $box12 = document.getElementById("box12");
    $box10.addEventListener('click',function(){
        console.log('box10捕获');
    },true);
    $box11.addEventListener('click',function(){
        console.log('box11捕获');
    },true);
    $box12.addEventListener('click',function(){
        console.log('box12捕获');
    },true);
    $box10.addEventListener('click',function(){
        console.log('box10冒泡');
    },true);
    $box11.addEventListener('click',function(){
        console.log('box11冒泡');
    },true);
    $box12.addEventListener('click',function(){
        console.log('box12冒泡');
    },true);
    $box10.onclick = function(){
        console.log('box10目标');
    }
    $box11.click = function(){
        console.log('box11目标');
    }
    $box12.click = function(){
        console.log('box12目标');
    }
    //以及更换顺序去实验

</script>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值