JS事件擒获与冒泡
日期：2014-05-16 浏览次数：20492 次
JS事件捕获与冒泡
使用js的时候，当给子元素和父元素定义了相同的事件，比如都定义了onclick事件，单击子元素时，父元素的onclick事件也会被触发。js里称这种事件连续发生的机制为事件冒泡或者事件捕获。
为什么会有事件冒泡，又有捕获呢？应为当初IE浏览器和Natscape浏览器分别对自己浏览器的事件采用了不同的发生机制，IE浏览器采用了冒泡型：定义有相同事件的嵌套元素，当事件被触发时，子元素拥有优先权，即从里向外发生，像水里的泡泡一样从里向外冒。而Netscape采用了相反的做法，即捕获型，父元素拥有优先权，最外层的元素最先发生。
后来W3C组织统一了标准，在任何的W3C的事件模型中，事件先进入有外向里进入捕获阶段，再由里向外进入冒泡阶段。
这是一个非常简单的事件冒泡的小Demon，读者可以复制在txt里，保存成.html运行下。
<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
- 加油哈
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
