DOM事件模型浅析

rubyshen 发布于2019-08-23 12:26 / 1575人阅读

摘要：事件发生后，对象可能会作出响应，也有可能无动于衷。事件模型在讲解事件模型前，再用一个例子作为引入。当一个事件发生时，事件会在树中进行传播。冒泡阶段在此阶段，事件从事件源开始向上传播，直到根结点。

1.何为DOM

DOM是“Document Object Model”的缩写，中文译为“文档对象模型”。它是一种跨平台、跨语言的编程接口，将HTML，XHTML，XML文档映射成树形结构，树的每一个节点都是一个对象。正因如此，面向对象的编程语言（如javascript）可以通过DOM对HTML，XHTML，XML文档进行操作。对于HTML文档来说，它的根结点为document对象，HTML元素为element对象，HTML元素的属性为attr对象。

2.何为DOM事件及如何对其作出响应

在浏览网页时，我们常常需要页面对用户的操作作出响应，比如点击“阅读全文”后我们期望页面展示被折叠的文本，按下回车键后浏览器提交已填好的表单。用户的各种操作都是“事件”。事件都是在对象上发生的，可能是DOM对象、BOM对象，等等。事件发生后，对象可能会作出响应，也有可能“无动于衷”。我们希望DOM元素对事件作出响应，一般而言有两种方法：
i.事件属性
事件属性是一种特殊的属性，它的值规定了对应事件发生时需要执行的javascript脚本。例：

上面为button标签添加了事件属性onclick，其值为"console.log("button clicked!")"，它规定了当元素被鼠标点击时，控制台输出"button clicked"。
ii.addEventListener()方法
EventTarget.addEventListener()方法将指定的监听器注册到EventTarget上，当该对象触发指定的事件时，指定的回调函数就会被执行。EventTarget可以是element对象,document对象或者任何其他支持事件的对象。例：

//脚本中
var mybutton=document.getElementById("mybutton");
mybutton.addEventListener("click",function(e){console.log("button clicked!");});

上例为button元素注册了click事件的监听器，并规定事件时触发控制台输出"button clicked"。

3.DOM事件模型

在讲解DOM事件模型前，再用一个例子作为引入。请看下面的html文件：




    
    DOM Event Model

这里为id分别为outer,inner1,inner2,core的4个元素定义了事件属性，元素被点击后将在控制台输出它的id。现在问题来了：
如果我点击core元素，控制台将会输出什么？
点击core元素时，由于core元素包含在inner2元素里，inner2元素同样被点击了;同理，inner2元素包含在outer元素里，那么outer元素也被点击了。这种情况下哪一个元素的click事件将会被触发,或者说三者都被触发？如果说三者都被触发，那么又是以怎样的顺序被触发？
我在火狐浏览器做了一次实验，控制台输出结果如下：

core
inner2
outer

也就是说，三者的事件都被触发了，且是“由内向外”触发的。
下面我们再做一个有趣的实验：我们将上面的html文件再做一个小小的改动，将core元素的样式

left: 50px;

改为

left: -250px;

此时观察页面我们会发现，尽量core是inner2的子节点，但由于我们定义了“怪异”的样式，它跑到了inner1里面。现在我们再次用鼠标点击core，观察控制台的输出：

core
inner2
outer

和刚才的结果一模一样！尽管表面上inner1似乎被点击了，但它的click事件并没有触发;反而是看似未被点击的inner2元素的click事件被触发了。仿佛core元素的click事件被触发后，click事件一层一层向上“传播”给了父节点。
为了解释刚才的实验结果，是时候开始讲解DOM事件模型了。
当一个事件发生时，事件会在DOM树中进行传播。传播分为两个阶段：
i.捕获阶段
在此阶段，事件从根结点（即document结点）开始向下传播，直到事件源所在元素。
ii.冒泡阶段
在此阶段，事件从事件源开始向上传播，直到根结点。
拿刚才的例子来说，事件传播的顺序为：
document捕获->html捕获->body捕获->outer捕获->inner2捕获->core捕获->core冒泡->inner2冒泡->outer冒泡->html冒泡->document冒泡
对于事件属性，默认在冒泡阶段触发事件。如果用addEventListener()方法注册监听器，则可以指定在捕获阶段还是冒泡阶段触发事件：如果最后一个参数为false（默认值），则在冒泡阶段触发事件;如果为true，则在捕获阶段触发事件。
一般来说，我们推荐采用addEventListener()方法来注册监听器，而尽量不用事件属性。因为事件属性不利于行为与结构的分离，使代码难以维护。

云服务器 GPU云服务器 DOM事件 dom事件管理 dom事件冒泡 DOM元素事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98521.html

DOM事件模型浅析

摘要：事件发生后，对象可能会作出响应，也有可能无动于衷。事件模型在讲解事件模型前，再用一个例子作为引入。当一个事件发生时，事件会在树中进行传播。冒泡阶段在此阶段，事件从事件源开始向上传播，直到根结点。 1.何为DOM DOM是Document Object Model的缩写，中文译为文档对象模型。它是一种跨平台、跨语言的编程接口，将HTML，XHTML，XML文档映射成树形结构，树的每一个节...

banana_pi 2019-08-02 11:46 评论0 收藏0
浅析SAX,DOM,JAXP,JDOM与DOM4J之间的关系

摘要：通过解析器获取文档对象后，开发人员可以很方便的对其进行操作，如获取更元素，获取一个子元素，增加子元素，移除子元素。它并没有为解析提供任何新功能，但是它为在获取与解析器提供了更加直接的途径。自身不包含解析器，默认使用随包一起发行的。 showImg(/img/bVDhQE?w=888&h=220); 文章最初发表于我的个人博客非典型性程序猿众所周知，SAX与DOM是JAVA中两大核心X...

妤锋シ 2019-08-14 14:42 评论0 收藏0
浅析SAX,DOM,JAXP,JDOM与DOM4J之间的关系

摘要：通过解析器获取文档对象后，开发人员可以很方便的对其进行操作，如获取更元素，获取一个子元素，增加子元素，移除子元素。它并没有为解析提供任何新功能，但是它为在获取与解析器提供了更加直接的途径。自身不包含解析器，默认使用随包一起发行的。 showImg(https://segmentfault.com/img/bVDhQE?w=888&h=220); 文章最初发表于我的个人博客非典型性程序猿...

JasinYip 2019-08-27 10:52 评论0 收藏0
浅析 web 前端 MVVM

摘要：它由微软架构师和开发，通过利用微软图形系统和的互联网应用派生品的特性来简化用户界面的事件驱动程序设计。微软的和架构师之一于年在他的博客上发表了。更改时会得到提醒这个情况是一个单向流。前言记得四个月前有一次面试，面试官问我 MVVM 是什么，MVVM 的本质是什么。我大脑一片混乱，那时我对 MVVM 的认知就只是双向绑定和Vue，以这个关键字简单回答了几句，我反问 MVVM 的本质是...

VincentFF 2019-08-23 14:35 评论0 收藏0
webkit渲染机制浅析

摘要：模块和将下面的渲染机制，安全机制，插件机制等等隐藏起来，提供一个接口层。进行网页的渲染进程，可能有多个。最后进程将结果由线程传递给进程最后，进程接收到结果并将结果绘制出来。这是之前在简书上面的处女作，也搬过来了，以后就一直在 segmentfault 上面写文章了，webkit技术内幕-朱永盛是我大四买的书，很旧的一本书了，当时只看了一点点，一直没继续看完它，现在才看完，，，说来惭愧...

Cobub 2019-08-02 11:03 评论0 收藏0