【JS】DOM事件模型

最新推荐文章于 2024-04-22 08:47:11 发布
最新推荐文章于 2024-04-22 08:47:11 发布
阅读量2.8k 收藏 3
点赞数 2
分类专栏： Web前端 文章标签： 事件处理 DOM模型
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LZGS_4/article/details/46224561
版权

DOM事件模型主要包含4个方面的内容，分别是：

  1. 事件流
  2. 主流浏览器的事件模型
  3. 事件对象
  4. 注册与移除事件监听器

下面一一了解下：

首先，什么是DOM？文档对象模型（DOM）是表示文档（比如HTML和XML）和访问、操作构成文档的各种元素的应用程序接口（API）。一般的，支持Javascript的所有浏览器都支持DOM。

在DOM眼中，HTML跟XML一样是一种树形结构的文档，<html>是根（root）节点，<head>、<title>、<body>是<html>的子（children）节点，互相之间是兄弟（sibling）节点；<body>下面才是子节点<table>、<span>、<p>等等。如下图：


DOM下，HTML文档各个节点被视为各种类型的Node对象。每个Node对象都有自己的属性和方法，利用这些属性和方法可以遍历整个文档树。由于HTML文档的复杂性，DOM定义了nodeType来表示节点的类型。这里列出Node常用的几种节点类型：

接口

nodeType常量

nodeType值

备注

Element

Node.ELEMENT_NODE

1

元素节点

Text

Node.TEXT_NODE

3
最低0.47元/天 解锁文章
励志故事
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
DOM 事件模型
Mark1614的博客
09-10 664
一、DOM事件模型分为捕获和冒泡 一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播有两个阶段。 （1）捕获阶段：事件从window对象自上而下向目标节点传播的阶段； （2）冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。 一般的顺序是先捕获，再冒泡。(但如果只有一个元素，按照代码执行顺序) 这里需要添加事件监听函数 事件监听函数是addEventListener('click', fn, bool) 如果不传bool的值或者bool值为falsy
js事件模型详解
weixin_47450807的博客
01-22 1048
addEvent: function(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } else { element["on" +.
js DOM事件模型浅析
I_recluse的博客
05-20 266
事件模型按照DOM规范来说是有两种：DOM0级事件模型以及DOM2级事件模型。但由于IE浏览器的特殊性，IE8及以下浏览器不支持DOM2及事件模型，所以需要单独列出一项IE事件模型。尽管现在IE8及以下版本浏览器可以不作为兼容性考虑对象，但还是有必要说一下。 1.DOM0级事件模型 DOM0级事件模型是最早的事件模型，也叫做原始事件模型，所有浏览器都支持。这种事件模型比较简单，特点是： （1）没有事件流的概念，只会触发绑定目标元素的事件，不会冒泡或者捕获到其他DOM节点。 （2）每个元素只能绑定一个
事件模型一（事件模型简介及常见事件模型）
最新发布
m0_48205251的博客
04-22 694
对于采用了图形用户界面的程序来说，事件控制是非常重要的。一个源（事件源）产生一个事件并把它（事件对象）送到一个或多个监听器那里，监听 器只是简单地等待，直到它收到一个事件，一旦事件被接收，监听器将处理这些事件。一个事件源必须注册监听器以便监听器可以接收关于一个特定事件的通知。
【基础知识】事件模型
lanwuying的专栏
07-08 1458
DOM树【Document Object Model】 介绍事件模型之前，先简单看下DOM树的结构： DOM树就像是一颗倒长着的大树，这样的对象模型决定了节点之间都有一定的关联。它们关系可能有父子、有兄弟，我们可以顺着这颗树做出许多操作)。 每个HTML页面都是一颗DOM树，浏览器在解析HTML代码时，会按照代码结构将代码解析成一颗树状结构，每个HTML标签对应DOM树上相应的结点。 下面是...
事件模型
weixin_42617917的博客
05-03 645
一、事件模型是什么 浏览器的事件模型，就是通过监听事件执行对应的监听函数。 JS绑定事件监听有三种方法： html的on属性 【on+事件名】的方法绑定 <script> el.setAttribute('onclick','doSomething()'); //等同于<Element onclick = "doSomething()"> </s...
JS事件模型
一片涟漪
09-13 169
模型类型：DOM Level 0（原始事件类型）、DOM Level 2、IE事件类性 一、DOM0模型 直接在dom上绑定事件（例如onclick），没有事件的传播（事件一旦发生就立刻调用事件句柄）。 特点： 1、DOM0级事件模型是早期的事件模型，所有的浏览器都是支持的。 2、一个DOM对象只能注册一个同类型的函数，因为注册多个同类型的函数的话，就会发生覆盖，之前注册的函数就会无效。 3、DOM0不会阻止事件冒泡的发生 下面举个例子： <!DOCTYPE html> <html
关于javascript DOM事件模型的两件事
12-11
事件捕捉（Event Capture）的实现问题 W3C DOM Level2的事件模型规范中，事件在DOM树中的传播过程（从根节点到目标节点）被分为了两个阶段：捕捉（Capture）和冒泡（Bubbling）。下面这个图能大概的说明整个过程： ...
手写DOM事件模型
04-29
在Web开发中，DOM（Document Object Model）事件模型是JavaScript与网页交互的关键。它允许我们监听、处理和触发各种用户或浏览器产生的事件，如点击、鼠标移动、键盘输入等。本篇文章将深入探讨如何通过原生...
深入理解JS DOM事件机制
10-21
- DOM2级事件规范定义了一个统一的事件流模型，包含三个阶段：事件捕获阶段、处于目标阶段和冒泡阶段。 - 在捕获阶段，事件从文档的根节点开始，经过每个层级，直到目标元素。 - 处于目标阶段，事件真正到达触发...
js DOM模型操作
10-29
JavaScript DOM模型操作主要涉及对网页文档的结构进行动态修改，它是Web开发中不可或缺的一部分。DOM全称为Document Object Model，它是一种标准，允许程序和脚本动态更新、添加、删除和改变HTML或XML文档的结构。...
12.在JavaScript中的事件模型如何理解?
kleinBlue.的博客
10-19 380
一、事件与事件流 javascript中的事件，可以理解就是在HTML文档或者浏览器中发生的一种交互操作，使得网页具备互动性， 常见的有加载事件、鼠标事件、自定义事件等 由于DOM是一个树结构，如果在父子节点绑定事件时候，当触发子节点的时候，就存在一个顺序问题，这就涉及到了事件流的概念 事件流都会经历三个阶段： 事件捕获阶段(capture phase) 处于目标阶段(target phase) 事件冒泡阶段(bubbling phase) 事件冒泡是一种从下往上..
DOM模型和事件
xiaoyu_alive的博客
01-26 1644
讲述了JavaScript中DOM模型和事件的相关知识点。
五分钟了解DOM 事件模型
weixin_33674976的博客
05-24 1454
通俗理解，事件是用户或者浏览器自己执行的某种动作，是文档或者浏览器发生的一些交互瞬间，比如点击（click）按钮等，这里的click就是事件的名称。JS与html之间的交互是通过事件实现的，DOM支持大量的事件。DOM 事件模型这个知识点，在面试的时候也是常考知识～ 事件流 我们知道，DOM是个树形结构，当我们在页面上单击一个按钮，页面上哪些元素会触发这个事件，是发生在这个按钮上，还是这个按钮的容...
常用事件模型总结
huzilinitachi的专栏
04-02 949
事件模型一般有select、poll、 eventport 、dev/poll、epoll、kqueue这几种。以下对这几种事件模型逐个作原理讲解。 1.select模型  select通过select系统调用监视多个文件描述符集合，select调用返回后，集合中的文件描述符会被内核进行标志位的修改，进程可以获得这些文件描述符从而进行后续的读写操作。select几乎在所有的操作系统平台上都支持...
数据分析模型之二：事件模型
AndersonHuang的博客
10-31 895
在日常工作中，不同岗位、不同角色所关注的事件各不相同，比如，市场人员可能关注点击进入落地页的人数以及进入落地页后用户是否点击核心按钮，比如“立即注册/立即购买”等？运营人员可能更关注某次邀请好友活动中老用户是否点击该活动页面，是否将邀请海报分享到朋友圈？PM可能更关心新功能上线后用户是否点击打开？在洞察诸如此类的指标过程中，事件模型就起到了至关重要的作用。那么，什么叫做“事件”呢？简单讲，就是用户在产品上的行为。
JavaScript DOM事件模型
weixin_30566149的博客
03-17 74
　　早期由于浏览器厂商对于浏览器市场的争夺，各家浏览器厂商对同一功能的JavaScript的实现都不进相同，本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类。 　　1、DOM事件模型。DOM事件模型分为两种：事件冒泡和事件捕获。事件冒泡最初是微软提出的DOM事件流的模型，顾名思义，就是值浏览器的事件流如同冒泡一样，从最低处到最高处。最低处对应的是DOM中最具体的元素，最高处则...
JavaScript之DOM事件模型
Jancy的博客
02-26 372
EventTarget接口addEventListener：绑定事件的监听函数target.addEventListener(type,listener,useCapture)var btn=document.getElementById('btn'); btn.addEventListener('click',hello,false); function hello(){console.log('
js中DOM事件绑定分析.docx
01-21
"本文档主要分析JavaScript中的DOM事件绑定，包括内联模型、脚本模型以及DOM2级事件模型，详细列举了各种常见的DOM事件，并介绍了DOM2级事件中`addEventListener()`和`removeEventListener()`方法的使用。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值