jquery 中的事件冒泡
2015-11-17 23:56
846 查看
废话少说,先来一段代码热热身:
View Code
网页上有两元素,其中一个元素嵌套在另一个元素里,并且都被绑定了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>元素时,就只会输出相应的内容,而不会输出其他内容。你也可以试着给<div>元素加上该方法,效果一定不错哦!!!
<!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>
View Code
网页上有两元素,其中一个元素嵌套在另一个元素里,并且都被绑定了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】Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()
- JQuery:cookie插件
- 【jQuery】slideUp()和slideDown()函数
- Jquery-Rotate实现查看原图并旋转图片
- 前端开发者都应知道的 jQuery 小技巧
- Jquery+ashx+json 绑定数据
- 前端计划第二天-jQuery基础
- jQuery遮罩插件jQuery.blockUI介绍及使用
- jquery 点击div 以外窗口隐藏的方法
- 以后上午就只能这样了么-jQuery
- Jquery easy ui dataGrid
- jquery中attr和prop的区别
- jquery ajax局部加载方法介绍
- jquery 插件 validate 学习
- jQuery基础语法
- jQuery-1.9.1源码分析系列(九) CSS操作
- jQuery设计思想
- jQuery 动画的执行
- jQuery异步提交与JSON解析
- jQuery整理1