DOM 事件冒泡
1.什么是事件冒泡？
事件冒泡就是从具体到不具体，
例如：当你给了一个button按钮一个点击事件，再给他的父级相同的事件，就会按照，button，body，document，window，继续向上冒泡。
2。什么是事件捕获？
从不具体到具体，跟事件冒泡刚好相反。window document body button 。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: ;
padding: ;
list-style: none;
} #box {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: ;
top: ;
}
</style>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn'); oBtn.setCapture();
oBtn.onclick = function(){
alert('');
}
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn">
</body>
</html>
3.Dom事件流包括三个阶段。
1.>事件捕获阶段
2.>处于目标阶段
3.>事件冒泡阶段
4.事件捕获阶段
window.addEventListener('click',function(){
},true)
为true代表事件使用事件捕获模式，false则代表使用事件冒泡
5.阻止事件冒泡 stopPropagation()
DOM 事件冒泡的更多相关文章
- DOM事件-冒泡、捕获、传播、委托
事件捕获 以点击事件为例事,同类型事件会由根元素开始触发,向内传播,一直到目标元素.从外到内依次触发:根—目标的祖先素—目标的父元素—目标元素. 事件冒泡 根事件捕获截然相反.发生点击事件时,事件会从 ...
- Angular4.x Event (DOM事件和自定义事件)
Angular组件和DOM元素通过事件与外部进行通信,两者中的事件绑定语法是相同的-(eventName)="expression": <button (click)=&qu ...
- DOM 事件流与事件处理程序
㈠事件流 ▶事件:是文档和浏览器窗口中发生的,特定的交互瞬间. ▶事件流:描述的是从页面中接受事件的顺序 ⑴DOM事件冒泡 定义:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后 ...
- js事件捕获，事件冒泡，事件委托以及DOM事件流
一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...
- Dom事件流、冒泡、捕获
Dom事件流 dom的结构是一个倒立的树状结构.当一个html元素触发事件时,事件会在dom的根节点和触发事件的元素节点之间传播,中间的节点都会收到该事件. 捕获:div元素触发事件时,事件先从根节点 ...
- 事件冒泡及事件委托的理解（JQuery Dom操作）
jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...
- dom阻止事件冒泡
通常有两种事件流模型,一种是冒泡,一种是捕获.顾名思义,冒泡就是从内往外传播,捕获就是从外往里传播. 对于dom事件,就是这样的.比如,有两个父子div. <div id="pdiv& ...
- DOM事件阶段以及事件捕获与事件冒泡先后执行顺序
平时浏览这么多技术文章,如过不去实践.深入弄透它,这个技术点很快就会在脑海里模糊.要加深印象,就得好好过一遍.重要的事情说三遍,重要的知识写一遍. 开发过程中我们都希望使用别人成熟的框架,因为站在巨人 ...
- w3c标准 dom对象 事件冒泡和事件捕获
http://www.cnblogs.com/chengxs/p/6388779.html http://www.jb51.net/article/42492.htm W3C标准是什么? 1.表现(c ...
随机推荐
- 平衡树学习笔记（5）-------SBT
SBT 上一篇:平衡树学习笔记(4)-------替罪羊树 所谓SBT,就是Size Balanced Tree 它的速度很快,完全碾爆Treap,Splay等平衡树,而且代码简洁易懂 尤其是插入节点 ...
- P1959 遗址_NOI导刊2009普及（6）
题意:平面上n个点(坐标$0\le x,y\le 5000,n \le 3000$) 求以其中四个点为顶点的正方形的最大面积 $O(n^2)$枚举两个点作为当前正方形的对角线 那么如何求出另外两个点呢 ...
- Linux安装vim编辑器
1.ubuntu系统:普通用户下输入命令:sudo apt-get install vim-gtk (注:出现E: Unable to locate package则将命令改成sudo apt-get ...
- kuangbin专题七 HDU4027 Can you answer these queries? （线段树）
A lot of battleships of evil are arranged in a line before the battle. Our commander decides to use ...
- C++变量作用域、生存期、存储类别
写C.C++代码的小伙伴一定在头疼变量的作用域.生存期.存储类别问题.什么静态.外部.寄存器.局部.全局搞得一头雾水.今天咱们就来梳理一下他们的变态关系(什么不得了的事情???) 1.变量的作用域 说 ...
- springcloud系列七 整合slueth,zipkin 分布式链路调用系统:
首先在代码里面引入依赖: <dependency> <groupId>org.springframework.cloud</groupId> <artifac ...
- P4245 【模板】任意模数NTT
Luogu4245 只要做三次的NTT,快的飞起 普通NTT,做9次 #include<cstdio> #include<cstring> #include<iostre ...
- git学习--远程分支删除
查看远程分支 git branch -r 使用下面两条命令来删除远程分支 git branch -r -d origin/branch-name git push origin :branch-na ...
- 上传文件中文文件名乱码的解决方法以及iconv函数的使用
http://www.jb51.net/article/14530.htm 一般客户端是什么格式就展示什么格式,比如浏览器的UTF-8,windows的GBK
- Arm寄存器介绍及汇编基础
一.ARM处理器支持7种工作模式 ① 用户模式(USR): 用于正常执行程序(The normal ARM program execution state) ② 快速中断模式(FIQ): 用于高速数据 ...