jquery 中的事件冒泡
废话少说，先来一段代码热热身：
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<meta charset="utf-8">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
</body>
<script>
$(function(){
//位span元素绑定click事件
$("span").click(function(){
var txt = $('#msg').html()+"<p>内层span元素被击中</p>";
$("#msg").html(txt);
});
//位div元素绑定click事件
$("#content").click(function(){
var txt = $("#msg").html()+"<p>外层的div元素被击中</p>";
$("#msg").html(txt);
})
//为body元素绑定click事件
$("body").click(function(){
var txt = $("#msg").html()+"<p>body元素被击中</p>";
$("#msg").html(txt);
})
})
</script>
</html>
网页上有两元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时<body>元素上也绑定了click事件。
当单击内部的<span>元素，即触发<span>元素的click事件时，会输出3条记录，如图所示：
只单击内部的<span>元素，就会触发<div>元素和<body>元素上的click事件，这就是由于事件冒泡引起的。
在单击<span>元素的同时，也单击了包含<span>元素的<div>元素和包含<div>元素的<body>元素，并且每一个元素都会按照特定的顺序响应click事件。
为了解决这一问题，我们在这里得提到“事件对象”这一概念：
$("element").bind("click",function(event){ //event：事件对象
})；
这样，当单击“element”元素时，事件对象就被创建了。这个事件对象只有事件处理函数才能够访问到。事件处理函数执行完毕之后，事件对象就被销毁。
停止事件冒泡：
停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在jquery中提供了stopPropagation()方法来停止事件冒泡。
$("span").bind("click",function(event){
var txt = $('#msg').html()+"<p>内层span元素被击中</p>";
$("#msg").html(txt);
event.stopPropagation(); //停止事件冒泡
})
这样，当单击<span>元素时，就只会输出相应的内容，而不会输出其他内容。你也可以试着给<div>元素加上该方法，效果一定不错哦！！！
jquery 中的事件冒泡的更多相关文章
- jQuery中的事件冒泡
1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he ...
- JQuery中阻止事件冒泡的两种方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- JQuery中阻止事件冒泡方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function( ...
- 在jQuery中解决事件冒泡问题
<pre name="code" class="html">事件会按照DOM层次结构像水泡一样不断向上直至顶端 解决方法:在事件处理函数中返回fal ...
- 你知道JQuery中的事件冒泡吗，他是怎么执行的，如何来停止冒泡事件？
事件冒泡 首先需要知道什么是事件冒泡? 事件冒泡是从里面的往外面开始触发的,就是点击子节点,会向上触发父节点,祖先节点的点击事件 demo: <html xmlns="http://w ...
- 关于JQuery中的事件冒泡
什么是事件冒泡? 事件冒泡就是当父元素和子元素存在同一事件时在子元素的事件处理程序中会自动调用其父级元素的事件处理程序. demo: <!DOCTYPE html> <html xm ...
- jQuery 中的事件冒泡和阻止默认行为
1.事件冒泡 <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...
- 【jQuery】jQuery中的事件捕获与事件冒泡
在介绍之前,先说一下JavaScript中的事件流概念.事件流描述的是从页面中接受事件的顺序. 一.事件冒泡( Event Bubbling) IE 的事件流叫做事件冒泡,即 ...
- jquery中怎样防止冒泡事件
jquery中怎样防止冒泡事件 1.利用event.stopPropagation() 2.利用return false 3.利用event.preventDefault()
随机推荐
- ubuntu下lamp配置
apache 在Ubuntu Linux上用 apt-get install apache2 安装Apache2后,竟然发现没有httpd.conf(位于/etc/apache2目录) Ubuntu的 ...
- JNI技术概念小结
JNI(Java Native Interface,JAVA原生接口) 使用JNI可以使Java代码和其他语言写的代码(如C/C++代码)进行交互. 问:为什么要进行交互? |- 首先,Java语言 ...
- Linux下的IO模式
对于一次IO访问(以read举例),数据会先被拷贝到操作系统内核的缓冲区中,然后才会从操作系统内核的缓冲区拷贝到应用程序的地址空间.所以说,当一个read操作发生时,它会经历两个阶段:1. 等待数据准 ...
- 【BZOJ-3578】GTY的人类基因组计划2 set + map + Hash 乱搞
3578: GTY的人类基因组计划2 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 367 Solved: 159[Submit][Status][ ...
- Metro-UI系统-2-color和icon
1.上图 Color icon 2. 怎么用 2.1 color使用 <!--1,设置背景和前景色--> <div class="tile bg-blue fg-white ...
- DataTable是否存在某个列的判断
使用 DataTable.Columns.Contains方法可以判断某个列名是否存在于某个DataTable中 //添加模拟数据 DataTable t = new DataTable(); Dat ...
- Linux C/C++ Memory Leak Detection Tool
目录 . 内存使用情况分析 . 内存泄漏(memory leak) . Valgrind使用 1. 内存使用情况分析 0x1: 系统总内存的分析 可以从proc目录下的meminfo文件了解到当前系统 ...
- PMD(Put Me Down)用例测试
PMD(Put Me Down)--用例测试 一.测试工作安排 6个成员随机分配一个模块进行测试,测试完成后将最后的结果汇总到测试用例文档中. 二.测试工具的选择与运用 测试工具选择:这次还没用工具, ...
- 多播程序设计（基于UDP协议）
首先要搞清楚多播IP地址有哪些 D类IP地址就是多播地址,范围是224.0.0.0 ~ 239.255.255.255 其中又划分为以下类别 D类地址的划分 类别 地址范围 描述 局部链接地址(本地网 ...
- Parallel Computing–Cannon算法 (MPI 实现)
原理不解释,直接上代码 代码中被注释的源程序可用于打印中间结果,检查运算是否正确. #include "mpi.h" #include <math.h> #includ ...