js中什么是事件气泡,如何阻止事件气泡
来源:互联网 发布:淘宝宝贝促销加权重么 编辑:程序博客网 时间:2024/05/17 09:14
看到一篇文章,讲了什么是事件气泡以及如何组织事件气泡,我觉得讲的很好,分享一下。
(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/ 这是原网址
- js中什么是事件气泡,如何阻止事件气泡
- 气泡事件
- JQ事件绑定效果|||事件气泡
- js 如何阻止事件传播
- js中阻止冒泡事件
- js中阻止默认事件
- js中阻止事件冒泡
- 气泡
- 气泡
- 气泡
- js中阻止默认事件,阻止冒泡事件
- js 如何阻止事件的冒泡
- JS中阻止事件冒泡实例
- Js 冒泡事件阻止
- 阻止js事件冒泡
- JS阻止事件冒泡
- JS阻止事件冒泡
- Js 冒泡事件阻止
- hdu 6194 string string string
- okhttp源码分析(一)——基本流程(超详细)
- mysql substr()函数
- 学习笔记之sql备忘录
- [JZOJ5388]博弈
- js中什么是事件气泡,如何阻止事件气泡
- Android调节屏幕亮度
- HDU 1003
- 周中记录--2017.9.28
- Android学习笔记15---拖动条的实现
- Codeforces Round #436 (Div. 2) 864E. Fire
- Apache用户登录认证和虚拟主机
- JAVA设计模式之工厂模式(简单工厂模式+工厂方法模式)
- css图形旋转