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()
随机推荐
- PHP递归生成树形数组
数据表结构 id name pid ){ foreach($data as $row){ if($row['pid']==$p_id){ $tmp = $this->tree( ...
- MVC+Jsonp实现跨域交互
一.认识Jsonp JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式 ...
- R 绘图 填充颜色
d <- density(mtcars$mpg) plot(d, main="Kernel Density of Miles Per Gallon") polygon(d, ...
- pip卡住不动的解决方案
用的是anaconda2,也就是python在windows下的最好的一键安装包,有numpy scipy matplotlib等常用包预装好了 最近搞caffe的python接口,需要装protob ...
- POJ3048 Max Factor
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...
- BZOJ3295 [Cqoi2011]动态逆序对
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...
- Java内存回收机制
在Java中,它的内存管理包括两方面:内存分配(创建Java对象的时候)和内存回收,这两方面工作都是由JVM自动完成的,降低了Java程序员的学习难度,避免了像C/C++直接操作内存的危险.但是,也正 ...
- Swift开发之 (01) 语法
一 Swift Swift,苹果于2014年WWDC(苹果开发者大会)发布的新开发语言,可与Objective-C*共同运行于Mac OS和iOS平台,用于搭建基于苹果平台的应用程序. Swift是一 ...
- NOIp 0924 水题记
这场貌似是gcd专场? 第一题很有意思,模拟gcd的过程即可. //0924 candy //by Cydiater //2016.9.24 #include <iostream> #in ...
- 修改MySQL的默认数据存储引擎
因为MySQL默认的是MyISAM数据引擎,不支持事务也不支持外键,所以需要用到Innodb引擎,于是决定将mysql的默认引擎设置为innodb.1 . 查看MySQL存储引擎是用的哪个?登录MyS ...