【JS】DOM事件模型

最新推荐文章于 2024-06-24 18:03:21 发布
最新推荐文章于 2024-06-24 18:03:21 发布
阅读量2.9k 收藏 3
点赞数 2
分类专栏： Web前端 文章标签： 事件处理 DOM模型
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzgs_4/article/details/46224561
版权
本文详细介绍了DOM事件模型，包括事件流、主流浏览器的事件模型、事件对象以及注册与移除事件监听器。讨论了IE与其他浏览器的差异，并提供了兼容性处理的示例，旨在帮助开发者更好地理解和应用DOM事件。
摘要由CSDN通过智能技术生成

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元/天 解锁文章
励志故事
关注
专栏目录
DOM 事件模型
Mark1614的博客
09-10 682
一、DOM事件模型分为捕获和冒泡 一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播有两个阶段。 （1）捕获阶段：事件从window对象自上而下向目标节点传播的阶段； （2）冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。 一般的顺序是先捕获，再冒泡。(但如果只有一个元素，按照代码执行顺序) 这里需要添加事件监听函数 事件监听函数是addEventListener('click', fn, bool) 如果不传bool的值或者bool值为falsy
JavaScript DOM事件模型
weixin_30566149的博客
03-17 80
　　早期由于浏览器厂商对于浏览器市场的争夺，各家浏览器厂商对同一功能的JavaScript的实现都不进相同，本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类。 　　1、DOM事件模型。DOM事件模型分为两种：事件冒泡和事件捕获。事件冒泡最初是微软提出的DOM事件流的模型，顾名思义，就是值浏览器的事件流如同冒泡一样，从最低处到最高处。最低处对应的是DOM中最具体的元素，最高处则...
JS中的三种事件模型
最新发布
求职大学生
06-24 285
传统事件模型是最早的事件处理方式，它通过将事件处理函数直接赋值给 HTML 元素的属性或 DOM 对象的属性来实现。这种方式简单直观，但功能有限，不支持事件捕获和事件流的概念。IE 事件模型是旧版本 Internet Explorer 浏览器使用的事件处理方式，它与标准事件模型类似，但使用的是。方法来绑定和解绑事件处理函数。这种方式更加灵活和强大，支持多个事件处理函数绑定到同一个事件上。标准事件模型是由 W3C 定义的，它引入了事件捕获和事件冒泡的概念，并提供了。方法，并且只支持事件冒泡，不支持事件捕获。
DOM事件模型
weixin_30294295的博客
07-24 69
DOM 　　首先，DOM全称是Document Object Model，即文档对象模型。DOM是W3C的标准，定义了访问 HTML 和 XML 文档的标准。 “W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。” DOM事件 　　DOM使Javascript有能力对HTML上的事件做出反应。这些事件包括鼠标键盘的点...
关于javascript DOM事件模型的两件事
12-11
事件捕捉（Event Capture）的实现问题 W3C DOM Level2的事件模型规范中，事件在DOM树中的传播过程（从根节点到目标节点）被分为了两个阶段：捕捉（Capture）和冒泡（Bubbling）。下面这个图能大概的说明整个过程： ...
深入理解JS DOM事件机制
11-27
JavaScript DOM事件机制是Web开发中的核心概念之一，它关乎如何响应用户与网页元素的交互。在深入理解这一机制前，我们需要了解三个关键术语：事件流、事件冒泡和事件捕获。 1. 事件流： 事件流描述了事件在HTML...
手写DOM事件模型
04-29
在Web开发中，DOM（Document Object Model）事件模型是JavaScript与网页交互的关键。它允许我们监听、处理和触发各种用户或浏览器产生的事件，如点击、鼠标移动、键盘输入等。本篇文章将深入探讨如何通过原生...
JS事件模型小结
A82621235的博客
12-06 188
三种事件模型：原始事件模型（DOM0），DOM2事件模型，IE事件模型； 不同点： 　　事件程序的注册（给HTML元素所对应的JS对象绑定事件） 　　事件传播的过程 事件模型的注册： 　　一、原始事件模型（没有兼容性问题） 原始事件模型的特点： 事件类型上面有ON（onclick） 没有事件的传播(事件一旦发生就立刻调用事件句柄) 一个DOM对象只能注册一个类型的事件，...
JavaScript之DOM事件模型
Jancy的博客
02-26 400
EventTarget接口addEventListener：绑定事件的监听函数target.addEventListener(type,listener,useCapture)var btn=document.getElementById('btn'); btn.addEventListener('click',hello,false); function hello(){console.log('
Dom事件模型
雾里看花叹朦胧
03-30 340
Dom事件模型，是W3C Dom事件规范的一种。 主要有： DOM0 级事件处理程序 | DOM基本事件模型 DOM2 级事件处理程序 IE独有的事件模型 DOM3 级带伤处理程序 DOM0是Dom事件定义的原始阶段，也是最混乱的，但兼容性也是最高的。 DOM0 就是on的方式绑定事件，包括： HTML 中 on <button type="button" onclick="test...
JS事件模型
weixin_33806914的博客
03-30 136
事件模型 发起方指事件是由谁产生的；比如，你喊谁谁谁回家吃饭，这时候你就是发起方； 监听方指事件是由谁来响应的,可以是一个，也可以是多个；比如，谁谁谁听到喊他回家吃饭，然后马上就回来了；  设计事件对象 添加监听方 删除监听方 清空监听方 触发监听方响应事件 JS实现模型 实现事件 在下面的函数中，向test中...
什么是事件冒泡和事件捕获、事件委托，他们的作用
weixin_46449470的博客
07-25 1767
事件模型 JavaScript事件使得网页具备互动和交互性，我们应该对其深入了解以便开发工作，在各式各样的浏览器中，JavaScript事件模型主要分为3种：原始事件模型、DOM2事件模型、IE事件模型。 一.原始事件模型（DOM0级） 这是一种被所有浏览器都支持的事件模型，对于原始事件而言，没有事件流，事件一旦发生将马上进行处理，有两种方式可以实现原始事件： （1）在html代码中直接指定属性值： （2）在js代码中为　document.getElementsById(“demo”).onclick =
js DOM事件模型浅析
I_recluse的博客
05-20 279
事件模型按照DOM规范来说是有两种：DOM0级事件模型以及DOM2级事件模型。但由于IE浏览器的特殊性，IE8及以下浏览器不支持DOM2及事件模型，所以需要单独列出一项IE事件模型。尽管现在IE8及以下版本浏览器可以不作为兼容性考虑对象，但还是有必要说一下。 1.DOM0级事件模型 DOM0级事件模型是最早的事件模型，也叫做原始事件模型，所有浏览器都支持。这种事件模型比较简单，特点是： （1）没有事件流的概念，只会触发绑定目标元素的事件，不会冒泡或者捕获到其他DOM节点。 （2）每个元素只能绑定一个
详解JavaScript MouseEvent接口与DOM事件模型
在JavaScript中，事件模型是控制事件触发、传播和处理的关键机制，包括事件流的概念，即事件在DOM树中从根节点向目标节点（捕获阶段）以及从目标节点向上至根节点（冒泡阶段）的过程。 首先，我们关注MouseEvent...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值