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 相关文章推荐
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
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的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
Python3远程监控程序的实现方法
2019/07/15 Python
python对一个数向上取整的实例方法
2020/06/18 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
软件测试企业面试试卷
2016/07/13 面试题
奉献演讲稿范文
2014/05/21 职场文书
安全目标管理责任书
2014/07/25 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python
Spring中的@Transactional的工作原理
2022/06/05 Java/Android