JQurey入门——事件机制之事件中的冒泡现象示例解释

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>效果图如：点击后

　　推荐阅读

　　Jquery UI震动效果实现原理及步骤

如果你想你的博客页面某些部分引起读者的注意，你可以使这些部分震动，如广告，今天这篇文章将介绍怎样使你的页面中的元素震动起来。要达到这个目的我们需要使用到Jquery和Jquery UI。首先让我创建一个震动块，可>>>详细阅读

本文标题：JQurey入门——事件机制之事件中的冒泡现象示例解释

地址：http://www.17bianji.com/kaifa2/JS/22373.html

1/2 1