使用js的时候，当给子元素和父元素定义了相同的事件，比如都定义了onclick事件，单击子元素时，父元素的onclick事件也会被触发。js里称这种事件连续发生的机制为事件冒泡或者事件捕获。
为什么会有事件冒泡，又有捕获呢？应为当初IE浏览器和Natscape浏览器分别对自己浏览器的事件采用了不同的发生机制，IE浏览器采用了冒泡型：定义有相同事件的嵌套元素，当事件被触发时，子元素拥有优先权，即从里向外发生，像水里的泡泡一样从里向外冒。而Netscape采用了相反的做法，即捕获型，父元素拥有优先权，最外层的元素最先发生。
后来W3C组织统一了标准，在任何的W3C的事件模型中，事件先进入有外向里进入捕获阶段，再由里向外进入冒泡阶段。
这是一个非常简单的事件冒泡的小Demon，读者可以复制在txt里，保存成运行下。
<html><head><title>JS冒泡</title> <style type="text/css"> #big{ background-color:#056FD3; width:400px; height:400px; } #normal{ background-color:#74DEF8; width:200px; height:200px; margin:100px; } #small{ background-color:#F5E84D; width:100px; height:100px; margin:50px; } </style></head><body> <div id="big" onclick="alert('I am biggest')"> <div id="normal" onclick="alert('I am normal')"> <div id="small" onclick="alert('I am small')"> </div> </div> </div></body></html>
- 1楼kanglix1an3天前 20:47
- 加油哈