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 中随处可见.比 ...
随机推荐
- Spark(4)
Spark Core官网学习回顾 Speed disk 10x memory 100x Easy code interactive shell Unified Stack Batch Streamin ...
- 原生 JavaScript 代替 jQuery【转】
目录 用原生JavaScript代替jQuery Query Selector CSS & Style DOM Manipulation Ajax Events Utilities Promi ...
- Jenkins 打tag回滚
利用jenkins,从gitlab上拉取代码,然后发布,如果想进行代码回退,其实还是代码发布,拉取的时候,选择合适的标签. 一.利用Git parameter插件选择branch或tag.下面的文本参 ...
- Java基础回顾一
1.JDK和JRE的区别: JDK:java开发工具包,提供java的开发环境和运行环境 JRE:java运行环境,为java的运行提供所需要的环境 2. ==和qruals的区别: == 基本类型: ...
- Debian x7中如何添加永久环境变量
一.进入/etc/bash.bashrc(使用文本编辑器打开) 二.在最后面添加新的环境变量 export PATH=usr/...(路径):$PATH 三.保存后,打开终端,输入source ~/. ...
- vue-router路由传参之query和params
首先简单来说明一下$router和$route的区别 //$router : 是路由操作对象,只写对象 //$route : 路由信息对象,只读对象 //操作 路由跳转 this.$router.pu ...
- cisco
配置ntp conf t ntp server 172.28.10.10 clock timezone Beijing 8 show clock 配置端口组 interface Port-channe ...
- 201871010106-丁宣元 《面向对象程序设计(java)》第十五周学习总结
201871010106-丁宣元 <面向对象程序设计(java)>第十五周学习总结 正文开头: 项目 内容 这个作业属于哪个课程 https://home.cnblogs.com/u/nw ...
- shell 大小关系 -eq -ne
-eq:等于-ne:不等于-le:小于等于-ge:大于等于-lt:小于-gt:大于
- HTTPS各版本安全策略HTTPS1_1_TLS1_0、HTTPS2_TLS1_0、HTTPS2_TLS1_2
来自阿里云 https://help.aliyun.com/document_detail/115169.html HTTPS安全策略 更新时间:2019-04-26 14:49:12 分组 ...