jquery入门——事件机制之事件中的冒泡现象示例解释


Posted in Javascript onSeptember 12, 2020

1、当用户浏览页面时,浏览器会对页面代码进行解释或编译——这个过程实质上是通过事件来驱动的,即页面在加载时,执行一个Load事件,在这个事件中实现浏览器编译页面代码的过程。事件被触发后被分为两个阶段,一个是捕获(Capture),另一个是冒泡(Bubbing),但大多浏览器并不是都支持捕获阶段,因此事件被触发后,往往执行冒泡过程。

2、示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>事件中的冒泡现象</title> 

<script type="text/javascript" src="jquery-1.8.3.min.js"></script> 

<script type="text/javascript"> 

$(function(){ 

var intI=0; 

$("body,div,#btnShow").click(function(event){ 

intI++; 

$(".clsShow").show().html("您好,欢迎来到JQuery世界!").append("<div>执行次数"+intI+"</div>"); 

}) 

}); 

</script> 

</head> 

<body> 

<div> 

<input id ="btnShow" type="button" value ="点击" class ="btn"/> 

</div> 

<div class ="clsShow"></div> 

</body> 

</html>

3、效果图预览:

jquery入门——事件机制之事件中的冒泡现象示例解释
点击后:
jquery入门——事件机制之事件中的冒泡现象示例解释
点击一次后,显示执行的次数是3次,这是因为事件在执行过程中存在冒泡现象,即虽然单击的是按钮,但按钮外围的<div>元素的事件也被触发,同时<div>元素外围的<body>元素的事件也被触发,整个过程为冒泡过程。如何阻止冒泡过程的发生,可以通过stopPropagation()方法或return false来实现,修改代码为:

<script type="text/javascript"> 

$(function(){ 

var intI=0; 

$("body,div,#btnShow").click(function(event){ 

intI++; 

$(".clsShow").show().html("您好,欢迎来到JQuery世界!").append("<div>执行次数"+intI+"</div>"); 

//event.stopPropagation(); 阻止冒泡过程 

return false; 

}) 

}); 

</script>

效果图如:
jquery入门——事件机制之事件中的冒泡现象示例解释
点击后
jquery入门——事件机制之事件中的冒泡现象示例解释
Javascript 相关文章推荐
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
javascript单例模式的简单实现方法
Jul 25 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 #Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 #Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 #Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 #Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 #Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 #Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 #Javascript
You might like
php中将数组存到文件里的实现代码
2012/01/19 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
php xhprof使用实例详解
2019/04/15 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
原生js实现表格循环滚动
2020/11/24 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python的垃圾回收机制深入分析
2014/07/16 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
python将数组n等分的实例
2019/12/02 Python
Python如何实现FTP功能
2020/05/28 Python
python定义类的简单用法
2020/07/24 Python
外贸业务员求职信
2014/06/16 职场文书
捐书倡议书
2014/08/29 职场文书
学籍证明模板
2014/11/21 职场文书
年度考核个人总结
2015/03/06 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL