stopPropagation和cancelBubble的区别

末蓝、 2022-05-30 06:47 166阅读 0赞

首先，总结一下DOM中的事件对象：（符合W3C标准）

*  preventDefault()     取消事件默认行为
 *  stopImmediatePropagation()   取消事件冒泡同时阻止当前节点上的事件处理程序被调用
 *  stopPropagation()    取消事件冒泡对当前节点无影响

IE中的事件对象：（不符合W3C标准）

*  cancelBubble()   取消事件冒泡
 *  returnValue()     取消事件默认行为

今天主要分析一下stopPropagation与cancelBubble的区别与使用效果。其实stopPropagation的作用跟cancelBubble是一样的，都是用来阻止浏览器默认的事件冒泡行为．

不同之处：（1）stopPropagation符合W3C标准，适用于FireFox等浏览器，不支持IE。

（2）cancelBubble方法不符合W3C标准，只支持IE浏览器。

<p>什么是事件冒泡,通俗的来讲就是 我们为页面内body添加一个单击事件,同样再为页面内li元素添加一个单击事件..当你单击li的时候.<br>
    body的事件也会被触发.....因为li被包含在body元素内...你单击了li同时也单击了body...这就是事件冒泡....<br>
    在有些时候.我们要阻止这种情况发生...也就是单击li事件.不会触发body的事件.... 这就叫阻止冒泡!<p>
    <div id="a">
    <ul id="lia">请单击下面的列表.会触发body事件
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
    </ul>
    
    <ul id="lib">请单下面的列表.不会触发body事件.
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
    </ul>
    </div>

在JSRun中测试，可以看到点击id为lia的li标签时会分别出现“Li事件”和“BODY事件”两次弹出框提醒，即会触发body事件，在点击id为lib的li标签时，只出现一次“Li事件”弹出框，不会触发body事件，是因为使用了阻止事件冒泡的事件。