事件流(事件冒泡、事件捕获和DOM事件流)

事件流是用来描述html页面中接收事件的顺序的。

IE给出的顺序叫做事件冒泡。

Netscape给出的顺序叫做事件捕获。

<!Doctype>
<html>
    <body>
        <div id="btn">Click me</div>
    </body>
</html>        

事件冒泡正如其名,向鱼类吐泡泡一样。当点击上面div时,最先接收到click事件的是div元素本身。因为它是文本中当前所交互的元素里嵌套最深的那个元素。随后沿着DOM树一路往上到body,到html,到document为止。

事件捕获中最先获取交互事件的时document,再然后是沿着DOM树一直往下直到作为目标的所交互元素。

所有现代浏览器都支持事件冒泡。

DOM2级事件规定了事件流的三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。

三个阶段的作用分别是:提供拦截事件的机会,实际的目标接收到事件,对事件做出响应。

在事件捕获阶段中,事件本身不会接触到目标元素。但是在事件处理过程中,处于目标阶段会被视为冒泡阶段的一部分。另外DOM2明确规定“捕获阶段不会接触到事件目标”,然而浏览器厂商们并没有理会。也因此在事件捕获阶段以及事件冒泡阶段都有机会在事件目标上进行事件处理。

原文地址:https://www.cnblogs.com/Syinho/p/12247275.html

时间: 2025-01-07 00:04:12

事件流(事件冒泡、事件捕获和DOM事件流)的相关文章

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

整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的DOM事件流.都是流的一种生动体现.用术语说流是对输入输出设备的抽象.以程序的角度说,流是具有方向的数据. 事件流分事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其

js事件流机制冒泡和捕获

JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流 从页面中接收事件的顺序称为事件流. IE --> 事件冒泡流 Netscape --> 事件捕获流 查看源码:DOM2事件-捕获-冒泡 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 我们先来个简单的例子,这是HTML结构 <!DOCTYP

Dom事件流、冒泡、捕获

Dom事件流 dom的结构是一个倒立的树状结构.当一个html元素触发事件时,事件会在dom的根节点和触发事件的元素节点之间传播,中间的节点都会收到该事件. 捕获:div元素触发事件时,事件先从根节点document→html→body→div这个顺序传播.(给这四个节点绑定事件,事件依次触发的顺序): 冒泡:div元素触发事件时,事件从div→body→html→document这个顺序传播. dom事件流:先捕获,再冒泡.从document开始,到document结束形成一个完整的事件流.

事件流,冒泡,捕获,事件委托

js里怎么去监听一个事件? 网页中每一个元素都有可以产生某些触发JavaScript函数的事件,事件是可以被JavaScript侦测到的一种行为 监听方法的参数分别代表什么意思?其中哪些参数关系到js的事件流机制?js事件流机制有哪些工作?工作原理是什么? 第一个参数是,事件类型,例如onclick 第二个参数是,响应的时候所执行的函数 第三个是事件流问题,侦听的三个阶段,捕获阶段 --- 目标阶段 --- 冒泡阶段 此处的参数确定侦听器是运行于捕获,目标还是冒泡 如果将useCapture设置

JavaScript 详说事件机制之冒泡、捕获、传播、委托

DOM事件流(event  flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(dubbed  bubbling):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件. 事件冒泡(event  capturing):与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点. 无论是事件捕获还是事件冒泡,它们都有一个共同的行为,就是事

关于dom 事件冒泡、捕获 dom事件三个阶段

本文主要解决两个问题: 什么是事件流 DOM事件流的三个阶段 起因 温故了一下我的<JavaScript高级程序设计>的时候,翻到DOM事件那一章,(说实话,现在无论是什么框架你都离不开操作DOM啊,毕竟这是你展示的最基本元素,就像人的细胞).想起了dom事件流原理,好多人不明白,只知道click mouseout等实用场景,真要理解和更进一步的前端是要必须:理论+实践 并行的. 当然,DOM事件所囊括的知识较为庞杂,所以本文专注与自己学习时所碰到的难点,DOM事件流. 流 流的概念,在现今的

一个DOM元素绑定多个事件时,先执行冒泡还是捕获

绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 . 一个DOM元素绑定两个事件,一个冒泡,一个捕获,则事件会执行多少次,执行顺序如何. 首先来了解一下冒泡和捕获是怎么回事: 1.冒泡 冒泡是从下向上,DOM元素绑定的事件被触发时,此时该元素为目标元素,目标元素执行后,它的的祖元素绑定的事件会向上顺序执行.如下代码所示,

关于DOM 事件流的三个阶段

一丶 流 什么是流? 比如 react 中的单项数据流,Node.js 中的流,或者本文中的 DOM 事件流,都是流的具体体现.专业地讲,流是程序输入或输出的一个连续的字节序列:通俗地讲,流是有方向的数据. 二丶 事件流 什么是事件流? 假想一下,现在有一组同心圆,你把手指在最里面的圆心上,与此同时,你也正在指着外层的其他同心圆.假设最里面的圆是 DOM 中的一个按钮,那就是说,你点击按钮这个元素的同时,也点击了他的所有父级元素.那么这个点击事件 DOM 要怎么处理呢?事实上,这个点击事件并非只

JavaScript DOM事件流

昨天一天被Amy姐姐讲懵圈了.讲的自信心快没有了,严重怀疑智商.所以今天写一篇相关的基础知识博客,好好补一下.心情有点low,但还是要加油!!!没有人会同情弱者. 历史由来:DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响.这两种事件流分别是捕获和冒泡.和许多Web技术一 样,在它们成为标准前,Netscape和微软各自不同地实现了它们.Netscape选择实现了捕获事件流,微软则实现了冒泡事件流.幸运的 是,W3C决定组合使用这两种方法,并且大多数新