JavaScript DOM事件流

昨天一天被Amy姐姐讲懵圈了。讲的自信心快没有了,严重怀疑智商。所以今天写一篇相关的基础知识博客,好好补一下。心情有点low,但还是要加油!!!没有人会同情弱者。

历史由来:DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一 样,在它们成为标准前,Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流,微软则实现了冒泡事件流。幸运的 是,W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。

DOM事件流

DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素结点根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM事件流。

DOM同时支持两种事件模型:捕获型事件冒泡型事件,但是,捕获型事件先发生。两种事件流会触发DOM中的所有对象,从document对象开始,也在document对象结束。

DOM事件模型的最独特的性质是,文本节点也触发事件(在IE中不会)。

1.冒泡事件流

当事件在某一DOM元素被触发时,例如用户在客户名字节点上点击鼠标,事件将跟随着该节点,继承各自的父节点冒泡穿过整个的DOM节点层次,直到它遇到依附有该事件类型处理器的节点,此时,该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡,在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法,在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true如果不停止事件的传播,事件将一直通过DOM冒泡直至到达文档根。

2.捕获事件流

事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目标元素的所有祖先元素()依次往下传递。在这个过程中,事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获,如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理;否则,事件会被接着传递给派生元素路径上的下一元素,直至目标元素。事件到达目标元素后,它会接着通过DOM节点再进行冒泡。

具体介绍:

(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

IE 5.5: div -> body -> document

IE 6.0: div -> body -> html -> document

Mozilla 1.0: div -> body -> html -> document -> window

(2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确对象(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。

(3)DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。

DOM事件模型最独特的性质是,文本节点也触发事件(在IE中不会)。

支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法,其中第3个参数 useCapture是一个Boolean值(布尔值),用来设置事件是在事件捕获时执行,还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用 attachEvent()方法,此方法没有相关设置,不过IE的事件模型默认是在事件冒泡时执行的,也就是在useCapture等于false的时候执行,所以把在处理事件时把useCapture设置为false是比较安全,也实现兼容浏览器的效果。

( 4 )事件流的写法以及实现方式

标准实现方式使用关键词addEventListener,假如你想要给某一个元素添加事件,现在就可以这样写element.addEventListener(eventType, fn, false).

DOM对象.addEventListener(事件类型, 回调函数, 事件机制)这里的事件类型表示你要使用哪种事件类型比如click, 回调函数里面写着触发此事件你要做什么事情, 事件机制分为冒泡和捕获,如果为false表示事件冒泡,为true表示事件捕获.

写到这大致明白一点了,现在去听amy姐姐的课吧,听完她的课再来更博,要写一篇全互联网最全的

DOM事件流介绍。

时间: 2024-10-11 06:04:08

JavaScript DOM事件流的相关文章

从click事件理解DOM事件流

事件流是用来解释页面上的不同元素接受一个事件的顺序,首先要明确两点: 1.一个事件的影响元素可能不止一个(同心圆理论),但目标元素只有一个. 2.如果这些元素都绑定了相同名称的事件函数,我们怎么知道这些函数的运行顺序?于是有了事件流的概念(事件捕捉,事件冒泡) 举个例子: <div id="outer"> <p id="inner">Click me!</p> </div> 为了看起来方便,先无视CSS样式,那么蓝色的

关于DOM 事件流的三个阶段

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

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

[DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在数据结构中是如何传播的. 传播路径 事件对象(event objects)被分发给事件目标(event target),在分发开始的时候,在实现中必须先确定事件对象的传播路径. 这个传播路径必须是一个有序的list,其中包含了事件对象必须通过的事件目标. 对于DOM的实现来说,这个传播路径必须反映这

Dom事件流、冒泡、捕获

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

js事件捕获,事件冒泡,事件委托以及DOM事件流

一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body→div ②处于目标阶段2:实际的目标到事件 ③事件冒泡阶段:由最具体的元素接收到事件,然后向上传播到较为不具体的节点.事件流模型:div →body→ html→ document 二:事件委托 事件委托顾名思义:将事件委托给另外的元素.其实就是利用DOM的事件冒泡原理,将事件绑定到目标元素的父节

IE和DOM事件流、普通事件和绑定事件的区别

IE和DOM事件流的区别 IE采用冒泡型事件 Netscape(网络信息浏览器)使用捕获型事件 DOM使用先捕获后冒泡型事件 示例: <body> <div> <button>click</button> </div> </body> 冒泡型事件模型:button->div->body (IE事件流) 捕获型事件模型:body->div->button (Netscape事件流) DOM事件模型:body-&g

DOM事件: DOM事件级别、DOM事件流、DOM事件模型、DOM事件捕获过程、自定义事件

前端面试中只要问到事件,就肯定会有DOM事件:如果回答出来了,就会一直向下延申,其实这些东西都很简单,但我第一次被问到的时候,也是懵的: DOM事件级别: DOM0 element.onclick = function() { } DOM1 一般只有设计规范,没有设计跟事件相关的东西:所以直接跳过 DOM2 element.addEventListener(‘click’, function() { }, false) DOM3 element.addEventLIstener(‘keyup’,

事件注册 DOM事件流 事件对象(常用属性,方法) 事件委派(鼠标,键盘事件对象)

注册事件概述 给元素添加事件,称为注册事件或者绑定事件 注册事件有两种方式:传统方式和方法监听注册方式 传统注册方式:利用 on 开头的事件:例如:onclick:注册事件的唯一性,后面的注册事件会把前面的覆盖 方法监听注册方式:addEventListener()IE9+:IE9以前用 attacthEvent()代替:会按照注册顺序依次执行没有唯一性的问题 addEventListener() 事件监听方式 eventTarget.addEventListener(type, listene

DOM事件流

“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段 事件捕获:不太具体的节点应该更早的接收到事件,而最具体的节点应该最后接收到事件:(DOM2规范要求从document开始传播,但是浏览器从window对象开始传播) 事件冒泡:最具体的节点先接收到事件,然后逐级向上传播到较为不具体的节点 接下来我用一个代码给大家演示一下DOM流的事件传递流程: 1 <body> 2 <div id="test1"> 3 1 4 <div