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>

效果图如：

点击后

赞 (0)

相关推荐

  • 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入门——事件切换之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入门——事件切换之hover()方法应用介绍

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

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

  • 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入门——用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入门——移除绑定事件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">

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

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

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

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

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

    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

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

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

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

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

  • 深入解析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

  • 详解Node.js中的事件机制

    前言 在前端编程中,事件的应用十分广泛,DOM上的各种事件.在Ajax大规模应用之后,异步请求更得到广泛的认同,而Ajax亦是基于事件机制的. 通常js给我们的第一印象就是运行在客户端浏览器上面的脚本,通过node.js我们可以在服务端运行javascript. node.js是基于单线程无阻塞异步式的I/O,异步式的I/O指的是当遇到I/O操作的时候,线程不阻塞而是进行下面的操作,那么I/O操作完成之后,线程时如何知道该操作完成的呢? 当操作完成耗时的I/O操作之后,会以事件的形式通知I/O操

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

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

  • C++中事件机制的简洁实现及需要放弃的特性

    事件模型是被广泛使用的好东西,但是C++标准库里没有现成的,其他实现又复杂或者不优雅,比如需要使用宏.现在VC11可以用在XP下了,那么就痛快的拿起C++11提供的先进设施组合出一个轻便的实现吧. 为了达到简洁的目的,需要放弃一些特性: 1.不支持判断函数是否已经绑定过(因为std::function不提供比较方法,自己实现function的话代码又变多了) 2.需要使用者接收返回的回调函数标识来移除事件绑定(原因同上) 3.事件没有返回值,不支持回调函数优先级.条件回调等事件高级特性(比如返回

  • 深入解析PHP的Yii框架中的event事件机制

    事件 事件可以将自定义代码"注入"到现有代码中的特定执行点.附加自定义代码到某个事件,当这个事件被触发时,这些代码就会自动执行.例如,邮件程序对象成功发出消息时可触发 messageSent 事件.如想追踪成功发送的消息,可以附加相应追踪代码到messageSent 事件. Yii 引入了名为 yii\base\Component 的基类以支持事件.如果一个类需要触发事件就应该继承 yii\base\Component 或其子类. Yii的event机制 YII的事件机制,是其比较独特

随机推荐