jQuery中DOM事件冒泡实例分析
来源:互联网 发布:机房网络拓扑结构图 编辑:程序博客网 时间:2024/04/30 04:08
什么是冒泡
在页面上可以有多个事件,也可以多个元素响应同一个事件。假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了click事件,同时body元素上也绑定了click事件。
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
});
// 为div元素绑定click事件
$('#content').bind("click",function(){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})
</script>
当单击内部span元素,即触发span元素的click事件时,会输出3条记录。只单击内部span元素,就会触发外部div元素和body元素上绑定的click事件。这是由事件冒泡引起的。在单击span元素的同时,也单击了包含span元素的元素div和包含div元素的元素body,并且每一个元素都会按照特定的顺序响应click事件。
元素的click事件会按照以下顺序“冒泡”。
1. <span>
2. <div>
3. <body>
之所以称为冒泡,是因为事件会按照DOM的层次结构像水泡一样不断向上直至顶端。
事件冒泡引发的问题
事件冒泡可能会引起预料之外的效果。上例中,本来只想触发<span>元素的click事件,然而<div>元素和<body>元素的click事件也同时被触发了。因此,有必要对事件的作用范围进行限制。当单击<span>元素时,只触发<span>元素的click事件,而不触发<div>元素和<body>元素的click事件:当单击<div>元素时,只触发<div>元素的click事件,而不触发<body>元素的click事件。
事件对象
由于IE-DOM和标准DOM实现事件对象的方法各不相同,导致在不同浏览器中获取事件对象变得比较困难。针对这个问题,JQuery进行了必要的扩展和封装,从而使得在任何浏览器中都能很轻松地获取事件对象以及事件对象的一些属性。
在程序中使用事件对象非常简单,只需要为函数添加一个参数,jQuery代码如下:
$("element").bind("click",function(event){
//event : 事件对象
//...
});
这样,当单击“element”元素时,事件对象就被创建了。这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后,事件对象就被销毁。
停止事件冒泡
停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在JQuery中提供了stopPropagation()方法来停止事件冒泡。
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "内层span元素被点击";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
})
当单击<span>元素时,只会触发<span>元素上的click事件,而不会触发<div>元素和<body>元素的click事件。可以用同样的方法解决<div>元素上的冒泡问题。
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
这样,当单击<span>元素或者<div>元素时,就只会输出相应的内容,而不会输出其他的内容。
阻止默认行为
网页中的元素有自己默认的行为,例如,单击超链接后会跳转、单击“提交”按钮后表单会提交,有时需要阻止元素的默认行为。
在JQuery中,提供了preventDefault()方法来阻止元素的默认行为。
举一个例子,在项目中,经常需要验证表单,在单击“提交”按钮时,验证表单内容,例如某元素是否是必填字段,某元素长度是否够6位等,当表单不符合提交条件时,要阻止表单的提交(默认行为)。
<form action="test.html">
用户名:<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>
$(function(){
$("#sub").bind("click",function(event){
var username = $("#username").val(); //获取元素的值
if(username==""){ //判断值是否为空
$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
event.preventDefault(); //阻止默认行为 ( 表单提交 )
}
})
})
当用户名为空时,单击“提交”按钮,会出现提示,并且表单不能提交。只有在用户名里输入内容后,才能提交表单。可见,preventDefault()方法能阻止表单的提交行为。
如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返同false。这是对在事件对象上同时调用stopPrapagation()方法和preventDefault()方法的一种简写方式。
在表单的例子中,可以把 event.preventDefault(); 改写为: return false;
也可以把事件冒泡例子中的 event.stopPropaqation(); 改写为: return false;
事件捕获
事件捕获和事件冒泡是刚好相反的两个过程,事件捕获是从最顶端往下开始触发。还是冒泡事件的例子,其中元素的click事件会按照以下顺序捕获。
1. <body>
2. <div>
3. <span>
很显然,事件捕获是从最外层元素开始,然后再到最里层元素。因此绑定的click事件,首先会传递给<body>元素,然后传递给<div>元素,最后才传递给<span>元素。
遗憾的是,并非所有主流浏览器都支持事件捕获,并且这个缺陷无法通过JavaScript来修复。JQuery不交持事件捕获,如果读者需要使用事件捕获,请直接使用原生的JavaScript。
- JQuery中DOM事件冒泡实例分析
- jQuery中DOM事件冒泡实例分析
- JQuery中DOM事件合成用法实例分析
- JQuery DOM 事件冒泡
- JQuery DOM 事件冒泡
- DOM编程事件冒泡详解 附jquery阻止事件冒泡
- jquery DOM 事件冒泡 魔法图书馆
- JQuery 中阻止冒泡事件
- Jquery Dom事件函数应用实例
- jQuery事件及DOM操作实例
- 恶补jquery(四)jquery中事件--冒泡
- JS,Jquery中事件冒泡以及阻止事件冒泡方法
- JS中阻止事件冒泡实例
- 在jQuery中解决事件冒泡问题
- jquery中如何防止冒泡事件
- jquery中如何防止冒泡事件
- JQuery document click 中防止事件冒泡
- JQuery 中阻止事件冒泡小案例
- 登录报错:A granted authority textual representation is required
- 2016 ACM/ICPC Dalian Online-1002 Different GCD Subarray Query
- CSS3鼠标悬停
- POJ 3468 线段树 区间更新+区间求和
- 用.net做B/S结构的系统,您是用几层结构来开发,每一层之间的关系以及为什么要这样分层?
- jQuery中DOM事件冒泡实例分析
- Machine Learning(Stanford)| 斯坦福大学机器学习笔记--第一周(5.线性回归的梯度下降)
- C++_Primer_chapter17 3.多重继承与虚继承
- 高通推出智能互联汽车参照平台
- Maven pom.xml 配置详解
- CCF CSP认证2016年9月,NO.3 炉石传说
- 深度学习之caffe Activation/Neuron Layers
- 进程和线程
- 二维数组中的查找