JQurey入门——事件机制之事件中的冒泡现象
来源：互联网 发布：ubuntu虚拟机如何全屏 编辑：程序博客网 时间：2024/05/22 00:52
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、效果图预览：
点击后：
点击一次后，显示执行的次数是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>
效果图如：点击后
- JQurey入门——事件机制之事件中的冒泡现象
- AngularJs-单击按钮事件中的冒泡现象
- 事件监听中的冒泡流和捕获流有趣现象
- 【AngularJS】解决单击按钮事件中的冒泡现象
- ASP.NET中的事件冒泡机制
- 事件流-事件冒泡机制
- Flex事件冒泡机制
- JavaScript 事件冒泡机制
- 事件冒泡机制
- Javascript事件冒泡机制
- javascript 事件冒泡机制
- javascript 事件冒泡机制
- 事件冒泡机制
- jqurey dom 事件问题
- 事件流中的事件冒泡
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
- 精通Silverlight——12.2.4 事件冒泡机制
- 事件浅谈之事件冒泡
- 架构设计
- mstsc命令连接到其它机器上
- 从 Java 代码逆向工程生成 UML 类图和序列图
- 无线路由器连接交换机
- 游戏感想
- JQurey入门——事件机制之事件中的冒泡现象
- JavaEE是企业级开发首选
- 【shell】Sed学习笔记
- ExecutorService线程池的用法
- 什么是Clang?
- Django学习笔记之【激活管理(admin)界面】
- framework: Split off some packages to a new file
- Cocos2dx---------------------添加Admob广告
- 网页编码格式
