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 相关文章推荐
符合标准的js表单提交的代码
Sep 13 Javascript
JS 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
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.MVC的模板标签系统(四)
2006/09/05 PHP
分享3个php获取日历的函数
2015/09/25 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
JQuery从头学起第一讲
2010/07/04 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
Python 字符串中的字符倒转
2008/09/06 Python
Python微信操控itchat的方法
2019/05/31 Python
python用match()函数爬数据方法详解
2019/07/23 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
快速了解Python开发环境Spyder
2020/06/29 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
美国轮胎网站:Priority Tire
2018/11/28 全球购物
岗位职责范本
2013/11/23 职场文书
超市端午节活动方案
2014/01/23 职场文书
企业消防安全制度
2014/02/02 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
市场部经理岗位职责
2015/02/02 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技