什么是事件起泡,用jquery阻止事件起泡
来源:互联网 发布:剑灵可爱灵男捏脸数据 编辑:程序博客网 时间:2024/04/28 00:18
什么是事件起泡,用jquery阻止事件起泡
2011-09-30 09:30:06| 分类: jQuery | 标签:事件起泡 |字号 订阅
(1)什么是事件起泡
首先你要明白一点,当一个事件发生的时候,
当事件发生后,这个事件就要开始传播。为什么要传播呢?
当事件在传播过程中,找到了一个能够处理它的函数,
说到这里,关键的问题来了,
为了更好地理解冒泡的概念,
这些对象的层次关系构成了DOM中的对象树。
事件的传播是有方向的,
所以,如果这个按钮上面有3层(form、document、
事件的这几个特性在0级dom中也是适用的。
(2)jquery阻止事件起泡实例
1、通过返回false来取消默认的行为并阻止事件起泡。
jQuery 代码:
$("form").bind(
"submit",
function() {
return false;
}
);
2、通过使用 preventDefault()方法只取消默认的行为。
jQuery 代码:
$("form").bind(
"submit",
function(event){
event.preventDefault();
}
);
3、通过使用 stopPropagation()方法只阻止一个事件起泡。
jQuery 代码:
$("form").bind(
"submit",
function(event){
event.stopPropagation();
}
);
(3)关于js事件起泡的验证
今天这个问题主要涉及到几个关键词:对象,触发事件,捕获事件,执行处理、起泡。这其实就是整个js执行的过程。其中冒泡这个过程很有意思。其实就像是一杯水,但是这杯水是分层次的,最底下是当前触发事件的对象。然后越往上范围越大,最顶层肯定是window,倒数第二层是document。气泡在上浮过程中会判断当前所到达的层有没有绑定事件处理方法。有话就执行相应的处理。没有的话就继续起泡。直到到达最顶层的window窗口层。我们可以在任何一层做相应的处理以阻止事件继续起泡。方法就是调用事件对象的阻止起泡的方法。event.stopPropagation();下面是写的一个验证js事件起泡的过程方法。
<script type="text/javascript">
$(document).ready(function(){
$('.one').click(function(e){
alert('one');
});
$('.two').click(function(e){
alert('two');
});
$('.three').click(function(e){
alert('three');
//阻止起泡取消下面的注释
// e.stopPropagation();
});
});
</script>
<div class="one" style="width:200px;height:200px;background:green;">
one
<div class="two" style="width:150px;height:150px;background:yellow;">
two
<div class="three">
three
</div>
</div>
</div>
(4)总结
1.一个事件起泡对应触发的是上层的同一事件特殊:如果two设置成双击事件,那么在你单击two的时候就会起泡触发one单击的事件
(双击包含单击)。
2.如果在click事件中,在你要处理的事件之前加上e.preventDefault();
那么就取消了行为(通俗理解:相当于做了个return操作),不执行之后的语句了。
3.e.stopPropagation()只要在click事件中,就不会触发上层click事件。
转自:http://blog.163.com/chtx87_98/blog/static/654011192011830928585/- 什么是事件起泡,用jquery阻止事件起泡
- 什么是事件起泡,用jquery阻止事件起泡
- 什么是事件起泡,用jquery阻止事件起泡
- 什么是事件起泡,用jquery阻止事件起泡
- 什么是事件起泡,用jquery阻止事件起泡
- 什么是事件起泡?用jQuery阻止事件起泡
- 事件起泡
- 事件起泡 Event bubbling
- 事件起泡 Event bubbling
- js事件起泡
- DOM2和IE的事件传播机制(捕捉,起泡)
- jQuery阻止事件冒泡
- Jquery 阻止事件冒泡
- 阻止jQuery事件冒泡
- 阻止jQuery事件冒泡
- jquery阻止事件冒泡
- 阻止jQuery事件冒泡
- jquery阻止事件冒泡
- windows系统性能计数器函数
- 我的考研历程
- linux的idr机制
- 四大触摸屏技术的工作理念及优点综述分析
- 代码之谜 - 其实,你不懂代码
- 什么是事件起泡,用jquery阻止事件起泡
- Win7安装VirtualBox提示“Installation failed!Error:系统...
- 在学习php正则和字符串的一个实例分享
- echo printf,read
- 一个调试器的实现(一)调试事件与调试循环
- 短信数据库分析(一)
- 网站投票系统!
- 工具收藏
- weblogic 配置及应用部署