往前走，一片诱人的新绿尽收眼底，那是满池的新荷。荷叶有的平展着圆盘浮在水面上；有的绿伞般在空中摇曳；有的兜着水珠把阳光反射得灿烂夺目；有的长得非常高，却未展开叶面，勇敢地挺立着。荷花则多半含苞待放，白中透粉的一朵朵花儿，活像一个个花仙子借着微风，在池中裙袂飞扬，翩然起舞。
js代码中在一个对象上触发某类事件(比如onclick事件)，如果此对象定义了此事件的处理程序(函数)，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，直至它被处理或者它到达了对象层次的最顶层(document对象)，而这个事件的传播过程就叫做冒泡！
通过下面的事例可以详细的对JS中的冒泡事件进行理解！
js冒泡事例：
示例代码：
<h1>我是H标签</h1>
<ul>
<li>我是li标签</li>
<li>我是li标签</li>
<li>我是li标签</li>
</ul>
<script>
window.onload = function () {
var li = document.getElementsByTagName('li');
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function () {
alert('我是ul事件')
}
document.body.onclick = function () {
alert('我是整个document事件')
}
for (i = 0; i < li.length; i++) {
li[i].onclick = function () {
alert('我是li标签的事件')
}
}
}
</script>
事件触发：
点击 li 标签，会分别触发 li 标签的事件，ul 标签的事件以及整个documnet的事件，直至li标签的所有上级标签的事件执行完毕为止！
阻止js冒泡事件的方法
js的冒泡事件是可以阻止的，可以参考下面的示例代码！
1、cancelBubble 取消事件处理
<script>
window.onload = function () {
var li = document.getElementsByTagName('li');
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function () {
alert('我是ul事件');
}
document.body.onclick = function () {
alert('我是整个document事件');
}
for (i = 0; i < li.length; i++) {
li[i].onclick = function () {
alert('我是li标签的事件');
//添加下面的代码即可阻止后面的冒泡事件
event.cancelBubble = true;
}
}
}
</script>
注：
(1)、event.cancelBubble 默认值为false
(2)、event.cancelBubble 的默认值如果为 true，则会取消其后面的代码处理
(3)、cancelBubble不符合W3C标准，并且只支持IE浏览器。
2、使用 stopPropagation() 方法
stoppropagation可以阻止浏览器的冒泡行为，但需要注意 stoppropagation 属于W3C标准，试用于Firefox等浏览器，但是不支持IE浏览器。
<script>
window.onload = function () {
var li = document.getElementsByTagName('li');
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function () {
alert('我是ul事件');
}
document.body.onclick = function () {
alert('我是整个document事件');
}
for (i = 0; i < li.length; i++) {
li[i].onclick = function () {
alert('我是li标签的事件');
//添加下面的代码即可阻止后面的冒泡事件
event.stopPropagation();
}
}
}
</script>
本文javascript中的冒泡事件详解到此结束。多用心去倾听别人怎样说，不要急着表达你自我的看法。小编再次感谢大家对我们的支持！
