往前走,一片诱人的新绿尽收眼底,那是满池的新荷。荷叶有的平展着圆盘浮在水面上;有的绿伞般在空中摇曳;有的兜着水珠把阳光反射得灿烂夺目;有的长得非常高,却未展开叶面,勇敢地挺立着。荷花则多半含苞待放,白中透粉的一朵朵花儿,活像一个个花仙子借着微风,在池中裙袂飞扬,翩然起舞。
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中的冒泡事件详解到此结束。多用心去倾听别人怎样说,不要急着表达你自我的看法。小编再次感谢大家对我们的支持!