JavaScript冒泡事件和stopPropagation方法

本文详细介绍了DOM事件处理中的事件冒泡机制,并通过具体的JavaScript代码示例展示了如何利用该机制来实现事件处理逻辑,包括如何阻止事件冒泡。

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

当一个元素上的事件被触发的时候,比如说鼠标点击了一个Button,同样的事件将会在那个元素的所有祖先元素中被触发。
这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。
js:
</p><p><pre class="javascript" name="code"><script type="text/javascript">
    var Bodyclick = function(){
        alert("冒泡了!!!");
    }
    window.onload = function(){
        var body = document.body;
        body.addEventListener('click',Bodyclick,false);//冒泡阶段
        //停止事件冒泡
        document.getElementById("stopBubble").addEventListener("click",
        function(event){
            alert("我是stopBubble_btn上事件");
            event.stopPropagation();
        },false);

        //正常事件冒泡
        document.getElementById("bubble").addEventListener("click",
        function(){
            alert("我是bubble_btn上事件");
        },false);
    };
</script>
html:
<button id="stopBubble">阻止冒泡</button>
<button id="bubble">冒泡</button>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值