谈事件冒泡(Bubble)和事件捕捉(capture)
事件的发生顺序
假设在一个元素中又嵌套了另一个元素并且两者都有一个onClick事件处理函数(event handler)。如果用户单击元素2,则元素1和元素2的单击事件都会被触发。但是哪一个事件先被触发?哪一个事件处理函数会被首先执行?换句话说,事件的发生顺序到底如何?如下图是当点击span元素区域是,三个点击事件都会被触发,但是先后顺序是怎样的呢?
<div onclick="func1">
<p onclick="func2">
<span onclick=""func3>
</span>
</p>
</div>
两种模型
对于这个事件的处理顺序上,Netscape和微软有两种截然不同的处理方法:
- Netscape主张事件会从最外层开始发生,直到最具体的元素,这种事件发生顺序被称为捕获型
- 微软则保持事件从最内部元素开始发生,然后一直向上传播,这种事件顺序被称为冒泡型
这两种事件顺序是截然相反的。Explorer浏览器只支持冒泡事件,Mozilla,Opera7和Konqueror两者都支持。而更古老的opera和iCab两者都不支持
w3c
任何发生在w3c事件模型中的事件,首是进入捕获阶段,直到达到目标元素,再进入冒泡阶段。
对于正常的web开发,可以选择是在捕获阶段还是冒泡阶段绑定事件处理函数,这是通过addEventListener()方法实现的,如果这个函数的useCapture参数是true,则在捕获阶段绑定函数,反之false,在冒泡阶段绑定函数。
element.addEventListener(event, function, useCapture)
阻止冒泡
在正常的开发过程中,如果想要阻止事件的传播,通过一个方法实现。
在微软的模型中,你必须设置事件的cancelBubble的属性为true
window.event.cancelBubble = true
在w3c模型中你必须调用事件的stopPropagation()方法
e.stopPropagation()
通过调用这些方法会阻止所有冒泡向外传播。跨浏览器解决方案:
function doSomething(e) {
if (!e) {
var e = window.event;
e.cancelBubble = true;
}
if (e.stopPropagation) {
e.stopPropagation();
}
}
本文参考文档:http://blog.jobbole.com/39446/
谈事件冒泡(Bubble)和事件捕捉(capture)的更多相关文章
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- javascript 事件传播与事件冒泡,W3C事件模型
说实话笔者在才工作的时候就听说了什么"事件冒泡",弄了很久才弄个大概,当时理解意思是子级dom元素和父级dom元素都绑定了相同类型的事件,这时如果子级事件触发了父级也会触发,然后这 ...
- 关于JS事件冒泡与JS事件代理(事件委托)
连接:https://blog.csdn.net/supercoooooder/article/details/52190100 核心代码: <ul id="parentUl" ...
- vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- 关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- vue中事件冒泡规则和事件捕获规则
<div id="app"> <div @click="handleClickOne"> <p @click="hand ...
- vue.js阻止事件冒泡和默认事件
首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...
- JavaScript事件冒泡机制和阻止事件冒泡及默认事件
一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true: FF下:event ...
- JavaScript停止事件冒泡和取消事件默认行为
功能:停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) { ...
随机推荐
- JDK8+Dubbo2.5.2实践
几年前就听说过Dubbo的大名,今天由于工作需要,研究一下. 从网上找了一篇文章,非常靠谱,并且提供了简单的示例代码,基本上可以跑起来. 文章地址: http://www.cnblogs.com/Ja ...
- ios之JavaScript
初次接触java脚本,感觉java脚本so interesting!为什么呢?写javascript代码感觉就像是在记流水账,无拐弯抹角,一个字,就是"干",想怎么干就怎么干,哈哈 ...
- window下安装jupyter
1.Install [Anaconda](https://docs.continuum.io/anaconda/install#anaconda-install) 实际上安装了anaconda就已经安 ...
- jenkins配置
自动化测试机器172,27.14.22 IP 一.jenkins要先登录——>点击JCF_Automation——>点击左边配置 二.环境变量赋值就不会把进程杀掉
- JS中setInterval与setTimeout的区别
JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function& ...
- u-boot平台的建立,驱动的添加,索引的创建,命令机制的实现.
一:U-boot移植前建立自己的平台: 关注的相关文件:1.u-boot- 2010.03/board/samsung/ //这个目录下需要创建自己的板级目录fsc100 cp –a smdkc100 ...
- LayaAir引擎——(八)
var a = new Array(); var b = new Array(); var ksjmCursor = 0; function ksjminit() { ksjminitName(); ...
- 第一章Android系统移植与驱动开发概述--读书笔记
以前,初步学习过嵌入式Linux驱动开发的基础课程,对于驱动开发可以说是有了一点点微末的基础吧.首先我们要对Android嵌入式系统有一个初步的认识,Android系统发展到今天已经具备了完善的架构. ...
- js 判断浏览器的类型
function getBrowser() { var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; ...
- Source Insight 常用设置和快捷键大全
Source Insight 常用设置和快捷键大全 退出程序 : Alt+F4 重画屏幕 : Ctrl+Alt+Space 完成语法 : Ctrl+E 复制一行 : Ctrl+K 恰好复制该位置右边的 ...