恶补jquery(四)jquery中事件--冒泡
来源:互联网 发布:安卓5.1的java模拟器 编辑:程序博客网 时间:2024/05/17 05:04
事件
当我们在打开一个页面的时候,浏览器会对页面进行解释执行,这实际上是通过执行事件来驱动的,在页面加载事件时,执行Load()事件,是这个事件实现浏览器解释执行代码的过程。
事件机制
事件中的冒泡现象
冒泡现象说的是事件执行顺序,当一个对象上触发了一个事件,如果没有定义此事件的处理程序或者事件返回true,那么这个事件就会向这个对象的父级对象传播,从里到外,直到他被处理(父级对象所有同类事件都被激活),或者它到达了对象层次的顶层(即document对象)。
通俗的讲:假把设一杯水分成不同颜色的几层,加热水的时候,当底层中有一个气泡出现时,气泡会一层层的上升,直到最层顶部。而我们不管在哪一层观察都能捕捉到这个气泡,这杯水就是我们的”DOM“,”气泡“就是我们的事情气泡。
事件冒泡示例
如下代码所示
<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JavaScript</title><style type="text/css">#box {width:200px; height:100px; border:2px solid blue}#box h5 {margin:0; padding:2px 5px; font-size:18px; text-align:right; background:blue; cursor:move}#box h5 a {text-decoration:none; color:#FFF}</style></head><body><div id="box"><h5 onclick="startDrag();"><a onclick="closeBox();" href="javascript:void(0);">close</a></h5><div id="testInfo"></div></div><script type="text/javascript">function startDrag(){ document.getElementById('testInfo').innerHTML += 'startDrag<br/>';}function closeBox(){ document.getElementById('testInfo').innerHTML += 'closeBox<br/>';}</script></body></html></span>运行结果如图1:
图1
由此我们可以看到,对于同一事件来说(都是onclick事件),先是底层触发,再是上一层触发事件,也就是”从里向外冒泡“。
而当我们把父类的h5标签的事件改为onmousedown 的时候,我们会看到下面的结果。虽然针对冒泡而言应该是里层的先触发,但是对于事件onmousedown来说,触发时机遭遇onclick事件。
图2
那如何阻止冒泡?
js阻止冒泡现象
如下代码所示:
<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JavaScript</title><style type="text/css">#box {width:200px; height:100px; border:2px solid blue}#box h5 {margin:0; padding:2px 5px; font-size:18px; text-align:right; background:blue; cursor:move}#box h5 a {text-decoration:none; color:#FFF}</style></head><body><div id="box"><h5 onclick="startDrag();"><a onclick="closeBox();" href="http://blog.csdn.net/lovesummerforever">close</a></h5><div id="testInfo"></div></div><script type="text/javascript">function startDrag(){ document.getElementById('testInfo').innerHTML += 'startDrag<br/>';}function closeBox(e){ document.getElementById('testInfo').innerHTML += 'closeBox<br/>';stopPropagation(e);}function stopPropagation(e) { e = e || window.event; if(e.stopPropagation) { //W3C阻止冒泡方法 e.stopPropagation(); } else { e.cancelBubble = true; //IE阻止冒泡方法 } } </script></body></html></span>
jquery阻止冒泡现象
如果是通过jquery访问的话,阻止冒泡现象方法如下
<span style="font-size:14px;"> $(function() { $("a").click(function(event) { return false; }); });</span>或者
<span style="font-size:14px;">$(function() { $("a").click(function(event) { event.stopPropagation(); }); });</span>
还有一个方法是event.preventDefault() ,该方法并不是处理事件的冒泡,而是阻止事件的默认行为。return false方法既阻止了冒泡,也阻止了事件的默认行为,event.stopPropagation()只阻止了事件的冒泡行为,但不阻止事件的默认行为。
1 0
- 恶补jquery(四)jquery中事件--冒泡
- JQuery中的事件 (四.事件冒泡)
- JQuery 中阻止冒泡事件
- jquery事件冒泡,jquery终止事件冒泡
- JS,Jquery中事件冒泡以及阻止事件冒泡方法
- 在jQuery中解决事件冒泡问题
- JQuery中DOM事件冒泡实例分析
- jquery中如何防止冒泡事件
- jquery中如何防止冒泡事件
- jQuery中DOM事件冒泡实例分析
- JQuery document click 中防止事件冒泡
- JQuery 中阻止事件冒泡小案例
- Jquery中阻止默认冒泡事件
- jQuery 冒泡事件
- Jquery 事件冒泡
- jQuery阻止事件冒泡
- Jquery 阻止事件冒泡
- JQuery 停止事件冒泡
- php中mysqli_real_escape_string()函数
- Android Jni开发笔记
- 黑马程序员IOS基础---C语言学习之函数
- 面试题9:斐波那契数列
- eclipse 中调试Maven项目
- 恶补jquery(四)jquery中事件--冒泡
- 双向链表
- 黑马程序员——Java高新技术——内省JavaBean及BeanUtils的应用、注解等
- 《剑指Offer》学习笔记--面试题14:调整数组顺序使奇数位于偶数前面
- hdu 3172 Virtual Friends
- Unity3D中销毁对象的方式
- 事件驱动设计
- 关于ling to sql左右连接的问题
- 设计模式学习--策略模式(Strategy Pattern)