jQuery 事件冒泡
1 . 什么是冒泡
在页面上可以有多个事件，也可以多个元素响应同一个事件。假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了 click 事件，同时<body>元素上也绑定了 click 事件。完整代码如下：
<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> <body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div> <div id="msg"></div>
</body>
页面初始化效果下图所示。
当单击内部<span>元素，即触发<span>元素的 click 事件时，会输出3条记录，如下图所示。这就是由事件冒泡引起的。
在单击<span>元素的同时，也单击了包含<span>元素的元素<div>和包含<div>元素的元素<body>，并且每一个元素都会按照特定的顺序响应 click 事件。元素的 click 事件会按照以下顺序“冒泡”。
(1) <span>
(2) <div>
(3) <body>
之所以称为冒泡，是因为事件会按照 DOM 的层次结构像水泡一样不断向上直至顶端，如下图所示。
2.事件冒泡引发的问题
事件冒泡可能会引起预料之外的效果。上例中，本来只想触发<span>元素的 click 事件，然而<div>元素和<body>元素的 click 事件也同时被触发了。因此，有必要对事件的作用范围进行限制。当单击<span>元素时，只触发 <span>元素的 click 事件，而不触发<div>元素和<body>元素的 click 事件；当单击<div>元素时，只触发<div>元素的 click 事件，而不触发<body>元素的 click 事件。为了解决这些问题，介绍以下内容。
（1）事件对象
由于 IE-DOM 和标准 DOM 实现事件对象的方法各不相同，导致在不同浏览器中获取事件对象变得比较困难。针对这个问题， jQuery 进行了必要的扩展和封装，从而使得在任何浏览器中都能很轻松地获取事件对象以及事件对象的一些属性。
在程序中使用事件对象非常简单，只需要为函数添加一个参数，jQuery 代码如下：
$("element").bind("click", function(event){ // event：事件对象
//...
});
这样，当单击“element”元素时，事件对象就被创建了。这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁。
（2）停止事件冒泡
停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在 jQuery 中提供了stopPropagation() 方法来停止事件冒泡。代码如下：
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
// 为div元素绑定click事件
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})
（3）阻止默认行为
网页中的元素有自己默认的行为，例如，单击超链接后会跳转、单击“提交”按钮后表单会提交，有时需要阻止元素的默认行为。在 jQuery 中，提供了 preventDefault() 方法来阻止元素的默认行为。
举一个例子，在项目中，经常需要验证表单，在单击“提交”按钮时，验证表单内容，例如某元素是否是必填字段，某元素长度是否够6位等，当表单不符合提交条件时，要阻止表单的提交（默认行为）。代码如下：
<script type="text/javascript">
$(function(){
$("#sub").bind("click",function(event){
var username = $("#username").val(); //获取元素的值
if(username==""){ //判断值是否为空
$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
event.preventDefault(); //阻止默认行为 ( 表单提交 )
}
})
})
</script> <body>
<form action="test.html">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form> <div id="msg"></div>
</body>
当用户名为空时，单击“提交”按钮，会出现下图所示的提示，并且表单不能提交。只有在用户名里输入内容后，才能提交表单。可见，preventDefault() 方法能阻止表单的提交行为。
如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回 false 。 这是对在事件对象上同时调用 stopPrapagation() 方法和 preventDefault() 方法的一种简写方式。
在表单的例子中，可以把 event.preventDefault(); 改写为 return false; 同理，也可以把 event.stopPropagation(); 改写为 return false;
（4）事件捕获
事件捕获和事件冒泡是刚好相反的两个过程，事件捕获是从最顶端往下开始触发。还是冒泡事件的例子，其中元素的 click 事件会按照以下顺序捕获。
(1) <body>
(2) <div>
(3) <span>
很显然，事件捕获是从最外层元素开始，然后再到最里层元素。因此绑定的 click 事件，首先会传递给<body>元素，然后传递给<div>元素，最后才传递给<span>元素。遗憾的是，并非所有主流浏览器都支持事件捕获，并且这个缺陷无法通过 JavaScript 来修复。 jQuery 不支持事件捕获，如果读者需要使用事件捕获，请直接使用原生的JavaScript 。
jQuery 事件冒泡的更多相关文章
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...
- jquery 事件冒泡 解决 ie firefox 兼容性问题
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- 阻止jQuery事件冒泡
Query对DOM的事件触发具有冒泡特性.有时利用这一特性可以减少重复代码,但有时候我们又不希望事件冒泡.这个时候就要阻止 jQuery.Event冒泡. 在jQuery.Event 的文档 中的开头 ...
- Jquery 事件冒泡、元素的默认行为的阻止、获取事件类型、触发事件
$(function(){// 事件冒泡 $('').bind("click",function(event){ //事件内容 //停止事件冒泡 event.stopPropaga ...
- Jquery事件冒泡
事件冒泡 什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么 ...
- jquery——事件冒泡、事件委托
一个事件冒泡的例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 事件冒泡及事件委托的理解（JQuery Dom操作）
jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...
- jq 事件冒泡总结
什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...
- 什么是JS事件冒泡
什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...
随机推荐
- [转]BAT 批处理脚本 教程
第一章 批处理基础第一节 常用批处理内部命令简介 批处理定义:顾名思义,批处理文件是将一系列命令按一定的顺序集合为一个可执行的文本文件,其扩展名为BAT或者CMD.这些命令统称批处理命令.小知识:可以 ...
- SpringBoot项目部署到服务器上，tomcat不启动该项目
今天lz把项目重新传到服务器上后,重启tomcat遇到个问题,就是这个tomcat怎么都不启动这个项目,别的项目都没事,一番查找后发现问题所在. 我们先建个SpringBoot工程,重现一下问题: 写 ...
- 多线程(5)async&await
.net 4.0的Task已经让我们可以非常简单地使用多线程,并且可以有返回值,也可以支持线程的取消等操作,可谓已经很强大了.但.net 4.5为我们带来了async&await,使得实现多线 ...
- Linux设备驱动之IIO子系统——Triggered buffer support触发缓冲支持
Triggered buffer support触发缓冲支持 在许多数据分析应用中,能够基于某些外部信号(触发器)捕获数据是比较有用的. 这些触发器可能是: 数据就绪信号 连接到某个外部系统的IRQ线 ...
- 逛csdn看见的一个知识阶梯，感觉不错
逛csdn看见的一个知识阶梯,感觉不错: 计算机组成原理 → DOS命令 → 汇编语言 → C语言(不包括C++).代码书写规范 → 数据结构.编译原理.操作系统 → 计算机网络.数据库原理.正则表 ...
- 小米6X手机解锁（bl锁）
1. http://www.miui.com/unlock/index.html,申请解锁2. 手机:“设置 -> 更多设置 -> 开发者选项 -> 设备解锁状态”中绑定账号和设备. ...
- virtual table for class
虚函数表 说起虚函数,相信你我都可以自然而然的想到“多态”,因为多态的实现就依赖于虚函数的继承和重写(覆盖).那么,class又或者是object是如何来管理虚函数的呢?你我又会想到虚函数表. 虚函数 ...
- gitbook 入门教程之导出电子书
gitbook 既可以将源码文件单独输出,也可以仅输出单个文件,常见的导出电子书格式主要有三种(ePub, Mobi, PDF),而这三种格式都依赖于系统本身提供的 ebook-convert 工具. ...
- Docker Data Center系列（二）- UCP安装指南
本系列文章演示如何搭建一个mini的云平台和DevOps实践环境. 基于这套实践环境,可以部署微服务架构的应用栈,演练提升DevOps实践能力. 1 系统要求 1.1 硬件和软件要求 Linux内核版 ...
- Linux 系统进程相关命令
1.pstree :可以使用pstree命令来查看系统中进程的分布结构. 2.ps: 常用于查看系统进程的命令是ps(process status)命令,可通过它来查看系统进程的最基本信息. ●-A ...