在介绍之前,先说一下JavaScript中的事件流概念。事件流描述的是从页面中接受事件的顺序。

 
一、事件冒泡( Event Bubbling)
           IE 的事件流叫做事件冒泡,即事件开始时由最躯体的元素接收,然后逐级向上传播到较为不具体的节点。
           IE9 、FF、 Chrome和Safari 将事件一直冒泡到 <window>对象。
                    
二、事件捕获( Event Capturing)
           事件捕获的思想是不太具体的节点应该更早接收到事件,二最具体的节点应该最后接收到事件。
                    
           IE9 、FF、 Chrome、Opera 和Safari都支持这种事件流模型,“ DOM2级事件”规范要求应该从 document对象开始传播,但是这些浏览器都是从 window对象开始捕获事件的。
 
三、DOM事件流
          “DOM2级事件”规范要求的事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。
                   
         IE8 及更早版本不支持事件流。“ DOM2级事件”规范明确要求捕获阶段不会涉及事件目标,但是 IE9、FF 和Opera更高版本都会在捕获阶段触发事件对象上的事件,所以,有两个机会在目标对象上面操作事件。
 
  对于jQuery中的事件模型,这篇文章讲的非常详细,基本思想我就不赘述了,各位可以点链接。
 
  下面主要来说一下,上面说的文章中提到的事件冒泡的副作用,及其防止办法。文中假设有如下结构的html代码:
  

   <div id="container">
<span>
<a href="javascript:void(0)">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A voluptas!</a>
</span>
</div>

  对应的jQuery代码如下:

    $('#container').mouseout(function () {
$(this).hide("slow");
});

  上述这样的代码,由于事件冒泡,

    ① 从a/span移出,但仍在div内部,div会hide;

    ② 从div移入a/span,div也会hide;

    ③ 当然,完全移出div,div也会hide。

  按照文章中提出的一个方案,给div内部的每个元素都注册相应事件,并使用.stopPropagation()方法阻止事件进一步传播。结果如下:

    ① 移动方向:a/span -> div -> div之外,成功。

    ② 移动方向:div -> a/span,div消失,失败。

  所以说,该方案仅适合严格按照从内到外的方向移动,在内部随意移动,就会失败。总的来说,这不符合用户上网习惯,限制太多了,实际中不能用。
 
  文章提出在jQuery中使用mouseenter和mouseleave避免冒泡的副作用,亲测过可行。所以说,还是使用这两种方法来代替mouseover和mouseout吧~
 
  

【jQuery】jQuery中的事件捕获与事件冒泡的更多相关文章

  1. javascript中的事件冒泡、事件捕获和事件执行顺序

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...

  2. js中关于事件捕获与事件冒泡的小实验

    1.事件冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div - ...

  3. JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html   ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->   ...

  4. js事件捕获,事件冒泡,事件委托以及DOM事件流

    一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...

  5. DOM事件阶段以及事件捕获与事件冒泡先后执行顺序

    平时浏览这么多技术文章,如过不去实践.深入弄透它,这个技术点很快就会在脑海里模糊.要加深印象,就得好好过一遍.重要的事情说三遍,重要的知识写一遍. 开发过程中我们都希望使用别人成熟的框架,因为站在巨人 ...

  6. JS事件捕获和事件冒泡

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 19.0px; font: 14.0px "Helvetica Neue" ...

  7. 【JavaScript】事件捕获、事件冒泡与事件委托

    2018年12月18日 最近在学习js时,遇到了三个名词:事件捕获.事件冒泡.事件委托. 一.事件捕获和事件冒泡 事件捕获和事件冒泡是为了解决网页中的事件流(事件发生的顺序)而提出的概念. 事件捕获是 ...

  8. 【转载】浅谈事件冒泡与事件捕获 - javascript 事件代理

    原文:https://segmentfault.com/a/1190000000749838 事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发 ...

  9. DOM事件机制(事件捕获和事件冒泡和事件委托)

    内容: 1.事件复习 2.事件冒泡与事件捕获 3.事件委托 1.事件复习 (1)事件 事件是用来处理响应的一个机制,这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器 下面的链接 ...

  10. javascript -- 事件捕获,事件冒泡

    使用js的时候,当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,单击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. 为什么会 ...

随机推荐

  1. oracle 表空间tablespace

    一.Oracle 表空间的组成 Everoone knows Oracle数据库真正存放数据的是数据文件,Oracle表空间是逻辑上的概念,他在物理上是并不存在的,把多个DataFile合并到一起就是 ...

  2. CMS: DNN And Umbraco

    在比较了众多CMS系统后,还是把焦点定在DNN和Umbraco两个系统上,这两个系统都可以使用UserControl扩展自己需要的功能. DNN的架构比较复杂,Module.Skin.Containe ...

  3. Yii “CDbConnection failed to open the DB connection: could not find driver"解决办法

    前言:用Yii框架做项目时,有时会遇到“CDbConnection failed to open the DB connection: could not find driver”这个问题,这个问题通 ...

  4. jreble安装 in idea

    http://www.cnblogs.com/littlehb/archive/2013/04/19/3031045.html

  5. unity收集log工具

    参考 yusong:http://www.xuanyusong.com/archives/2477 凉鞋     :https://www.cnblogs.com/liangxiegame/p/Uni ...

  6. 跨域拦截Access-Control-Allow-Origin设置多个origin

    在Extjs和java项目碰到了需要同时处理跨域,外部要访问后台接口的问题 原来的代码是这样,只能设置一个extjs前台需要过滤的跨域请求 package com.xgt.config; import ...

  7. 打开usb调试的方法

    方法一: settings --> about tablet --> build number(疯狂点击)  -->回退 developer options --> USB d ...

  8. SSM实现批量删除功能

    批量删除功能的实现 其实实现这个功能还是挺简单的 因为我这是直接拼接的,所以用了DOM方法来获取id话不多说直接上代码首先是复选框全选和反选这里的话 获取最上面一个复选框的状态同步到拼接的复选框  $ ...

  9. 浅谈WebService之JAX-RS与spring整合

    背景:首先谈一下webservice: 1.Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序, 可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发 ...

  10. spring 学习总结(一)

    一.spring概述 1.spring 是什么? Spring是一个开放源代码的设计层面框架,他解决的是业务逻辑层和其他各层的松耦合问题,因此它将面向接口的编程思想贯穿整个系统应用.Spring是于2 ...