深入解析stopPropagation与cancelBubble的区别

在DOM事件处理中，有两个方法用于控制事件的传播过程：stopPropagation 和 cancelBubble。虽然这两个方法的功能看似相似，但它们之间存在一些关键差异，尤其是在不同的浏览器环境下。

W3C标准下的事件对象方法：

• preventDefault(): 阻止事件的默认行为，例如点击链接时不跳转。
• stopImmediatePropagation(): 不仅阻止事件继续在DOM树中传播，还立即停止同一事件处理程序中的其他监听器执行。
• stopPropagation(): 阻止事件进一步向上或向下传播，但不影响当前节点上已注册的其他事件处理器。

IE特有的事件对象方法：

• cancelBubble: 设置为true时，可以阻止事件的冒泡行为。
• returnValue: 用于取消事件的默认行为，类似于W3C标准中的preventDefault()。

stopPropagation与cancelBubble的主要区别在于：

1. 标准兼容性: stopPropagation遵循W3C标准，广泛支持现代浏览器（如Firefox、Chrome等），但在旧版IE中不被支持。
2. 浏览器支持: cancelBubble是IE浏览器特有的属性，主要用于解决IE浏览器下的事件冒泡问题。

示例代码展示了如何使用这些方法来控制事件传播：

事件冒泡是指当一个子元素的事件被触发后，该事件会向父元素传递。例如，为页面中的body和li元素分别添加点击事件，点击li时，body的点击事件也会被触发。
 
请单击下面的列表，会触发body事件 
项目1
 
项目2
 
项目3
 
 
请单击下面的列表，不会触发body事件 
项目1
 
项目2
 
项目3
 
 

document.body.Onclick= function(){ alert("BODY事件"); }; function att_Event(){ var li = document.getElementById("lia").getElementsByTagName("li"); for(var i=0; i

通过上述代码，在JS环境中测试可发现，点击id为lia的li标签时，会先后弹出“Li事件”和“BODY事件”，表明body事件也被触发；而点击id为lib的li标签时，只有“Li事件”弹出，说明通过调用stopBubble函数成功阻止了事件冒泡至body。