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

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>

效果图如：

点击后

赞 (0)

相关推荐

  • JQuery入门——移除绑定事件unbind方法概述及应用

    JQuery入门——移除绑定事件unbind方法概述及应用

    1.在DOM对象的实践操作中,既然存在用于绑定事件的bind方法,也相应存在用于移出绑定事件的方法,在JQuery中,可以通过unbind方法移除所有绑定的事件或某一个事件. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • JQuery入门——事件切换之hover()方法应用介绍

    JQuery入门——事件切换之hover()方法应用介绍

    1.在JQuery中,有两个方法用于事件的切换,一个方法是hover(),另一个是toggle().所谓切换事件,即有两个以上的事件绑定于一个元素,在元素的行为动作间进行切换.如一个超级链接标记<a>若想实现当鼠标悬停时触发一个事件,鼠标移出时又触发一个事件,可以用切换事件轻松实现. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

  • JQuery入门——事件切换之toggle()方法应用介绍

    JQuery入门——事件切换之toggle()方法应用介绍

    1.在toggle()方法中,可以依次调用N个指定的函数,直到最后一个函数,然后重复对这个函数轮番调用,其语法如下:toggle(fn, fn2, [fn3, fn4,...]),其中fn.fn2.fn3.fn4等函数依次调用. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

  • JQuery入门——用bind方法绑定事件处理函数应用介绍

    JQuery入门——用bind方法绑定事件处理函数应用介绍

    1.bind()功能是为每个选择元素的事件绑定处理函数,其语法如下:bind(type, [data], fn) 其中type为一个或多个类型的字符串,如click或change,也可以自定义:可以被type调用的类型包括blur.focus.load.resize.scroll.unload.click.dbclick.mousedown等事件.参数data是作为event.data属性值传递对象的额外数据对象.参数fn是绑定到每个选择元素的事件中的处理函数. 2.示例代码: 复制代码 代码如

  • JQuery入门——用映射方式绑定不同事件应用示例

    JQuery入门——用映射方式绑定不同事件应用示例

    1.通过映射的方式,给对象绑定多个事件. 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"> <hea

  • JQuery入门——用one()方法绑定事件处理函数(仅触发一次)

    JQuery入门——用one()方法绑定事件处理函数(仅触发一次)

    1.one()方法功能是为所选的元素绑定一个仅触发一次的处理函数,其调用的语法格式为:one(type, [data], fn) 其中参数type为事件类型,即需要触发什么类型的事件:参数data为可选参数,表示作为event.data属性值传递给事件对象的额外数据对象:fn为绑定事件时所要触发的函数. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h

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

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

    1.当用户浏览页面时,浏览器会对页面代码进行解释或编译--这个过程实质上是通过事件来驱动的,即页面在加载时,执行一个Load事件,在这个事件中实现浏览器编译页面代码的过程.事件被触发后被分为两个阶段,一个是捕获(Capture),另一个是冒泡(Bubbing),但大多浏览器并不是都支持捕获阶段,因此事件被触发后,往往执行冒泡过程. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN

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

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

    1.当用户浏览页面时,浏览器会对页面代码进行解释或编译--这个过程实质上是通过事件来驱动的,即页面在加载时,执行一个Load事件,在这个事件中实现浏览器编译页面代码的过程.事件被触发后被分为两个阶段,一个是捕获(Capture),另一个是冒泡(Bubbing),但大多浏览器并不是都支持捕获阶段,因此事件被触发后,往往执行冒泡过程. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN

  • FLEX 事件机制-自定义事件介绍

    FLEX 事件机制-自定义事件介绍

    最近在做地图JS和FLEX的封装工作,flex封装需要用到自定义事件这方面知识,在这里就简单介绍一下FLEX自定义事件. 自定义事件必须注意几点: (1)自定义事件通过继承Event类来实现. (2)自定义事件不可以自己触发,只能有系统事件派发. 首先我们新建一个ActionScript 类,这个类继承flash.events.Event. 复制代码 代码如下: package { import flash.events.Event; public class MyEvent extends E

  • jQuery实现合并表格单元格中相同行操作示例

    jQuery实现合并表格单元格中相同行操作示例

    本文实例讲述了jQuery实现合并表格单元格中相同行操作.分享给大家供大家参考,具体如下: 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列 }) /** * 操作表格 合并单元格 行 * 2016年12月13日16:00:41 */ (function($) { // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件 // 才保留了jQuery.prototype这个形式 $.f

  • Java事件机制要素及实例详解

    java事件机制中包含下述三要素: 1.事件,发生了什么事,比如用户在界面上的一个操作(手势滑动屏幕),当一个事件发生的时候,该事件用一个事件对象表示,每一个事件对象都有其对应的事件类. Java中事件一般继承自java.util.EventObject类,封装了事件源对象,以及事件的相关信息. 每一类事件有一个相应的事件监听器接口,该接口定义了接收和处理事件的抽象方法.实现该接口的类,就是监听器类.其对象可作为监听器对象向相应的组件注册.事件的类名通常为:XxxEvent ,比如下面实例中的C

  • Spring的事件机制知识点详解及实例分析

    同步事件和异步事件 同步事件: 在一个线程里,按顺序执行业务,做完一件事再去做下一件事. 异步事件: 在一个线程里,做一个事的同事,可以另起一个新的线程执行另一件事,这样两件事可以同时执行. 用一个例子来解释同步事件和异步事件的使用场景,有时候一段完整的代码逻辑,可能分为几部分,拿最常见的注册来说,假设完整流程是,1.点击注册->2.检验信息并存库->3.发送邮件通知->4.返回给用户.代码这么写是正确,但不是最好的,缺点如下: 逻辑复杂,业务耦合,我们把校验数据并存库和发送邮件写到一个

  • 深入浅出 jQuery中的事件机制

    首先呢,我们先来看一下,jQuery中的ready事件,它的作用有些类似于window中的onload事件,只不过二者的区别在于,onload事件是要等到网页中的dom节点加载完成,并且css进行样式渲染后,JavaScript中进行了预加载后再执行,而ready事件呢,是在网页中的标签被解析为DOM节点是就执行其中的函数,直白点说,ready执行的比onload早,那么我们在用jQuery的时候,需要做一个ready的执行定义: //ready的作用,是为具体加载的实现. $(document

  • 深入解析JavaScript框架Backbone.js中的事件机制

    深入解析JavaScript框架Backbone.js中的事件机制

    事件模型及其原理 Backbone.Events就是事件实现的核心,它可以让对象拥有事件能力 var Events = Backbone.Events = { .. } 对象通过listenTo侦听其他对象,通过trigger触发事件.可以脱离Backbone的MVC,在自定义的对象上使用事件 var model = _.extend({},Backbone.Events); var view = _.extend({},Backbone.Events); view.listenTo(model

  • 初窥JQuery(二) 事件机制(1)

    当然它的优点并不只在于这点,使用JQuery事件处理机制比直接使用Javascript本身内置的一些事件相应方式更加的灵活,更加不容易暴露在外,而且有更加优雅的语法,大大减少了我们工作的量度. JQuery的事件处理机制包括:页面加载.事件绑定.事件委派.事件切换四种机制.我们先从$(document).ready()事件开始. 一.页面加载$(document).ready()相当与Javascript中的onLoad()事件,都是在页面加载的时候执行该方法,但是两者又有着微妙的差别,read

随机推荐