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 相关文章推荐
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
vue props对象validator自定义函数实例
Nov 13 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实现与ASP Banner组件相似的类
2006/10/09 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
Javascript 刷新全集常用代码
2009/11/22 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
python求列表交集的方法汇总
2014/11/10 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
python字符串,数值计算
2016/10/05 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
本科生个人求职自荐信
2013/09/26 职场文书
在职人员函授期间自我评价分享
2013/11/08 职场文书
大学生实习自我鉴定
2013/12/11 职场文书
秘书专业自荐信范文
2013/12/26 职场文书
大学生职业生涯规划书模版
2013/12/30 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
电影地道战观后感
2015/06/04 职场文书
法制主题班会教案
2015/08/13 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
java实现面板之间切换功能
2022/06/10 Java/Android