DOM事件机制解惑(摘)--事件的传播机制
DOM事件流
为什么是有事件流?
假如在一个button上注册了一个click事件,又在其它父元素div上注册了一个click事件,那么当我们点击button,是先触发父元素上的事件,还是button上的事件呢,这就需要一种约定去规范事件的执行顺序,就是事件执行的流程。
浏览器在发展的过程中出现实了两种不同的规范
- IE9以下的IE浏览器使用的是事件冒泡,先从具体的接收元素,然后逐步向上传播到不具体的元素。
- Netscapte采用的是事件捕获,先由不具体的元素接收事件,最具体的节点最后才接收到事件。
- 而W3C制定的Web标准中,是同时采用了两种方案,事件捕获和事件冒泡都可以。
事件阶段
既然有了事件捕获和事件冒泡,那就应该约定是事件的流向,是先捕获还是先冒泡,所以W3C标准中规定了事件流的三个阶段的顺序:
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段
有了捕获和冒泡这两种模式,我们就可以很好的控制父元素和子元素的事件执行顺序了
所以这里需要一种方法,不让事件向下捕获或向上冒泡
所以有了 e.stopPropagation()
方法,用于阻止事件的继续传递。
执行这条语句,无论我们是使用捕获模式还是冒泡模式,事件都不会继续传递,只会响应我们点击的元素。
http://coderlt.coding.me/2016/11/22/js-event/
DOM事件机制解惑(摘)--事件的传播机制的更多相关文章
- DOM的事件传播机制
在dom传播的过程中,一个事件有触发到响应,经历了三个过程: 1,目标的挖洞过程,先有html标签触发事件,然后向子标签一层一层传播,但未执行,,直到找到事件目标为止,这个过程叫做挖洞过程, 2,目标 ...
- [解惑]JavaScript事件机制
群里童鞋问到关于事件传播的一个问题:“事件捕获的时候,阻止冒泡,事件到达目标之后,还会冒泡吗?”. 初学 JS 的童鞋经常会有诸多疑问,我在很多 QQ 群也混了好几年了,耳濡目染也也收获了不少,以后会 ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- [DOM Event Learning] Section 4 事件分发和DOM事件流
[DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...
- 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了
哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...
- javascript 事件传播与事件冒泡,W3C事件模型
说实话笔者在才工作的时候就听说了什么"事件冒泡",弄了很久才弄个大概,当时理解意思是子级dom元素和父级dom元素都绑定了相同类型的事件,这时如果子级事件触发了父级也会触发,然后这 ...
- javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)
前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...
- 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件
整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...
- 关于DOM事件流、DOM0级事件与DOM2级事件
一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...
随机推荐
- 如何在linux CentOS 上安装chrome 谷歌浏览器?
获得linux命令的root权限:http://blog.csdn.net/mddy2001/article/details/76521101. 更改密码在终端中输入:sudo passwd root ...
- CPU体系结构(组成部分)
在准备网络工程师考试,里面有些知识点是比较常考的.自己写这篇博客呢,当作是笔记吧,自己看一看也分享给大家一起学习. 这部分的内容就是讲CPU里面的组成结构以及各部分的功能. CPU的构成:CPU主要由 ...
- python3使用模块
Python内置了很多非常有用的模块,只要安装完毕,这些模块就可以立刻使用. 我们以内建的sys模块为例,编写一个hello的模块: #!/usr/bin/env python3 # -*- codi ...
- 搞NDK开发
1.哪些场景下要用到NDK开发? 跨平台的库,如FFmpeg, skip,weex, 加固,防逆向 签名校验 图片压缩 音视频解码 OpenGL ES 高级特效 热修复 andfix 人脸识别 fac ...
- Java有参构造方法和成员方法
Java面向对象基础就包括有参构造方法和成员方法 无参构造声明方式为 class Teacher{ //无参构造方法,一般用在初始化变量 public Teacher(){ } } 有参构造声明为 c ...
- 团队作业第3周——需求改进&系统设计(crtl冲锋队)
2.需求&原型改进: 1.问题:游戏中我方飞机和敌方飞机是怎么控制的? 改进: 在游戏中,我控制我方飞机,按下方向键飞机便向按下的方向移动,按下Z键,我方飞机发射子弹. 敌方飞机面向随机的方向 ...
- 简易解说拉格朗日对偶(Lagrange duality)(转载)
转载自https://www.cnblogs.com/90zeng/p/Lagrange_duality.html,本人觉得讲的非常好! 1.原始问题 假设是定义在上的连续可微函数(为什么要求连续可微 ...
- appium---app输入中文
在app自动化的过程中,都会遇到输入中文的问题,今天总结下app自动化如何输入中文 app输入中文 在启动app的时候在参数里面添加unicodeKeyboard和resetKeyboard后,运行代 ...
- 1_ZedBoard开发板测试
启动 将SD卡插入电脑进行格式化 格式化时,要将SD卡格式化为FAT32文件系统.块大小格式化为4096字节时后面会出现无法启动的情况,可以先复现一下这个错误.块大小我选择4096字节. 然后将Zed ...
- zz深度学习论文合集大全
Pull requestsIssues Marketplace Explore Learn Git and GitHub without any code! Using ...