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 面向对象编程基础 多态
Aug 21 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 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将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
Javascript的匿名函数小结
2009/12/31 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
layui的select联动实现代码
2019/09/28 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
名片管理系统python版
2018/01/11 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
python实现马丁策略的实例详解
2021/01/15 Python
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
经典的班主任推荐信
2013/10/28 职场文书
信息工程学院毕业生推荐信
2013/11/05 职场文书
如何填写个人简历自我评价
2013/12/10 职场文书
创先争优演讲稿
2014/09/15 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
小学运动会开幕词
2016/03/04 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
基于Python实现流星雨效果的绘制
2022/03/18 Python
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android