DOM事件流

为什么是有事件流?

假如在一个button上注册了一个click事件,又在其它父元素div上注册了一个click事件,那么当我们点击button,是先触发父元素上的事件,还是button上的事件呢,这就需要一种约定去规范事件的执行顺序,就是事件执行的流程。

浏览器在发展的过程中出现实了两种不同的规范

  • IE9以下的IE浏览器使用的是事件冒泡,先从具体的接收元素,然后逐步向上传播到不具体的元素。
  • Netscapte采用的是事件捕获,先由不具体的元素接收事件,最具体的节点最后才接收到事件。
  • 而W3C制定的Web标准中,是同时采用了两种方案,事件捕获和事件冒泡都可以。

事件阶段

既然有了事件捕获和事件冒泡,那就应该约定是事件的流向,是先捕获还是先冒泡,所以W3C标准中规定了事件流的三个阶段的顺序:

  1. 事件捕获阶段
  2. 处于目标阶段
  3. 事件冒泡阶段


有了捕获和冒泡这两种模式,我们就可以很好的控制父元素和子元素的事件执行顺序了

所以这里需要一种方法,不让事件向下捕获或向上冒泡

所以有了 e.stopPropagation() 方法,用于阻止事件的继续传递。

执行这条语句,无论我们是使用捕获模式还是冒泡模式,事件都不会继续传递,只会响应我们点击的元素。

http://coderlt.coding.me/2016/11/22/js-event/

DOM事件机制解惑(摘)--事件的传播机制的更多相关文章

  1. DOM的事件传播机制

    在dom传播的过程中,一个事件有触发到响应,经历了三个过程: 1,目标的挖洞过程,先有html标签触发事件,然后向子标签一层一层传播,但未执行,,直到找到事件目标为止,这个过程叫做挖洞过程, 2,目标 ...

  2. [解惑]JavaScript事件机制

    群里童鞋问到关于事件传播的一个问题:“事件捕获的时候,阻止冒泡,事件到达目标之后,还会冒泡吗?”. 初学 JS 的童鞋经常会有诸多疑问,我在很多 QQ 群也混了好几年了,耳濡目染也也收获了不少,以后会 ...

  3. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  4. [DOM Event Learning] Section 4 事件分发和DOM事件流

    [DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...

  5. 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

    哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...

  6. javascript 事件传播与事件冒泡,W3C事件模型

    说实话笔者在才工作的时候就听说了什么"事件冒泡",弄了很久才弄个大概,当时理解意思是子级dom元素和父级dom元素都绑定了相同类型的事件,这时如果子级事件触发了父级也会触发,然后这 ...

  7. javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)

    前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...

  8. 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

    整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...

  9. 关于DOM事件流、DOM0级事件与DOM2级事件

    一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...

随机推荐

  1. Spark(4)

    Spark Core官网学习回顾 Speed disk 10x memory 100x Easy code interactive shell Unified Stack Batch Streamin ...

  2. 原生 JavaScript 代替 jQuery【转】

    目录 用原生JavaScript代替jQuery Query Selector CSS & Style DOM Manipulation Ajax Events Utilities Promi ...

  3. Jenkins 打tag回滚

    利用jenkins,从gitlab上拉取代码,然后发布,如果想进行代码回退,其实还是代码发布,拉取的时候,选择合适的标签. 一.利用Git parameter插件选择branch或tag.下面的文本参 ...

  4. Java基础回顾一

    1.JDK和JRE的区别: JDK:java开发工具包,提供java的开发环境和运行环境 JRE:java运行环境,为java的运行提供所需要的环境 2. ==和qruals的区别: == 基本类型: ...

  5. Debian x7中如何添加永久环境变量

    一.进入/etc/bash.bashrc(使用文本编辑器打开) 二.在最后面添加新的环境变量 export PATH=usr/...(路径):$PATH 三.保存后,打开终端,输入source ~/. ...

  6. vue-router路由传参之query和params

    首先简单来说明一下$router和$route的区别 //$router : 是路由操作对象,只写对象 //$route : 路由信息对象,只读对象 //操作 路由跳转 this.$router.pu ...

  7. cisco

    配置ntp conf t ntp server 172.28.10.10 clock timezone Beijing 8 show clock 配置端口组 interface Port-channe ...

  8. 201871010106-丁宣元 《面向对象程序设计(java)》第十五周学习总结

    201871010106-丁宣元 <面向对象程序设计(java)>第十五周学习总结 正文开头: 项目 内容 这个作业属于哪个课程 https://home.cnblogs.com/u/nw ...

  9. shell 大小关系 -eq -ne

    -eq:等于-ne:不等于-le:小于等于-ge:大于等于-lt:小于-gt:大于

  10. 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      分组 ...