jQuery 是一个 JavaScript 库,jQuery 极大地简化了 JavaScript 编程,在有关jq的描述中,jq是兼容现有的主流浏览器,比如谷歌、火狐,safari等(当然是指较新的版本)。在使用jq和js的时候出了不少兼容性问题,也有可能是我对两者的了解有限造成的,还是先理清楚两者的事件。

1、  DOM的事件捕获和事件冒泡—js支持冒泡和捕获,jq只支持冒泡

说起事件的捕获和冒泡就要追溯到网景与微软的“浏览器大战”,不过后来,W3C的规范要求浏览器同时支持捕获和冒泡机制,并允许开发人员选择把事件注册到哪个阶段。我们这个阶段只要了解怎么用就可以了。

当你触发某个元素的某个事件(如点击)的时候,事实上,这个元素处于它的父元素、body、html之中,你也同时触发了这些元素的事件,而冒泡和捕获两种模式不同的就是事件触发顺序的不同。

根据DOM文档树来说,事件捕获的发生的顺序从文档树的根节点开始,比如点击肉眼可见的某个元素,事件的触发顺序是:html.clcik->body.click->父元素.click->点击的元素.click,而事件冒泡则相反,会从子元素开始,触发顺序是:点击的元素.click ->父元素.click -> body.click -> html.clcik。

我们常用的模式是事件冒泡。

冒泡模式在使用某些事件(如mouseout)的时候有副作用(jq有解决),而某些浏览器并不支持捕获模式,jq不支持事件捕获。需要使用捕获模式只能用js

事件冒泡的副作用出现在mouseout,即鼠标移出元素的事件。如鼠标移出子元素的时候,如果你不做任何操作,它会继续冒泡,触发父元素的mouseout事件,即使这时候你的鼠标即使还在父元素内也会触发父元素绑定的移出事件。你需要在每一个mouseout事件阻止事件冒泡。但jQuery提供了mouseenter和mouseleave事件作为替代来避免这个副作用。

在jq中使用的都是事件冒泡,而js默认使用的是事件冒泡,但提供了事件捕获的注册。使用:

  target.addEventListener(type,fn,true/false);//其中最后一个参数默认是false(冒泡模式),当你设置true就是捕获模式

至于冒泡和捕获触发的顺序,应该是先冒泡再捕获,自己可以写个监听器测试一下。

参考:

https://www.cnblogs.com/susanws/p/5430777.html

http://www.ituring.com.cn/article/420?q=jQuery%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96

Javascript和jquery事件--事件冒泡和事件捕获的更多相关文章

  1. JavaScript与jQuery关于鼠标点击事件

    即实现鼠标点击其中一个菜单发生样式的改变,当点击下一个菜单时,当前菜单样式改变,其他菜单均变为之前样式. 用JavaScript,jQuery都可以实现,只是后者是封装的JavaScript库,具有s ...

  2. position布局影响点击事件以及冒泡获取事件目标

    在编写功能时总是会出现很多意想不到的问题,现在就讲讲我遇到的两个问题,通过举一个相似的例子来解说. <1> 元素互相独立,不存在包含于被包含 选择城市的按钮,为它绑定点击事件,点击后就弹出 ...

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

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

  4. js之事件冒泡和事件捕获介绍

    链接:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. (2)捕获型事件 ...

  5. 初始js闭包&事件的冒泡和捕获&EVENT对象

    一.初识闭包 function a(){   var n = 0;   this.inc = function () {     n++;     console.log(n);   }; } var ...

  6. jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)

    1.jQuery鼠标事件之click与dbclick事件   方法一:$ele.click()(不带参数)   <div id="test">点击触发<div&g ...

  7. js 事件冒泡、事件捕获、stopPropagation、preventDefault

    转自:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: ...

  8. js之事件冒泡和事件捕获

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

  9. js之事件冒泡和事件捕获详细介绍

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

  10. 关于js事件冒泡和时间捕获

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

随机推荐

  1. JavaScript获取本机IP地址

    <script type="text/javascript"> /** * Get the user IP throught the webkitRTCPeerConn ...

  2. Http协议与TCP协议理解(转载的)

    TCP协议对应于传输层,而HTTP协议对应于应用层,从本质上来说,二者没有可比性.Http协议是建立在TCP协议基础之上的,当浏览器需要从服务器获取网页数据的时候,会发出一次Http请求.Http会通 ...

  3. POJ2104 K-th Number(线段树,二分,vector)

    题意 不带修改区间第k小.(n<=100000) 题解 建立线段数和vector数组(vector为当前区间排列之后的序列)(归并) 然后对于每一个询问二分答案. 问题就转化为区间有多少数小于等 ...

  4. [HNOI2004]高精度开根

    题目:洛谷P2293.BZOJ1213. 题目大意:给你$n,k(n\leq 10^{10000},k\leq 50)$,求$\lfloor \sqrt[k]{n}\rfloor$. 解题思路:高精度 ...

  5. [洛谷P3929]SAC E#1 - 一道神题 Sequence1

    题目大意:给你一串数列,问你能否改变1个数或不改,使它变成波动数列? 一个长度为n的波动数列满足对于任何i(1 <= i < n),均有: a[2i-1] <= a[2i] 且 a[ ...

  6. webStrom的破解以及汉化

    破解方法: 把JetbrainsCrack-3.1-release-enc.jar包放到bin目录下,然后把webstorm64.exe.vmoptions文件用文本打开, 在最后面加上一句-java ...

  7. [JLOI2015]装备购买(线性基)

    [JLOI2015]装备购买 题目描述 脸哥最近在玩一款神奇的游戏,这个游戏里有 nn 件装备,每件装备有 \(m\) 个属性,用向量 \(\mathbf{z_i}\)=\((a_1, \ldots ...

  8. ECNUOJ 2143 端午节快乐

    端午节快乐 Time Limit:1000MS Memory Limit:65536KBTotal Submit:1720 Accepted:868 Description  有一段有趣的传说.公元前 ...

  9. 《AndroidStudio每日一贴》5. 怎样高速查看某个方法/注解的定义?

    操作方法: 使用快捷键 option + space 或 command + y 举个样例: 如以下的样例,我在输入@O的时候会出现代码补全列表,这个时候我想查看列表中项目的定义能够使用快捷键 opt ...

  10. hdu 1695 GCD (欧拉函数、容斥原理)

    GCD Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...