`

dom事件模型级别

阅读更多

到目前为止,DOM事件模型分为三个等级,分别是0级、1级、2级。

 

0级是最早的,而且目前所有的浏览器仍支持0级DOM模型。

0级模型的注册事件,就是我们经常见到的,如:

<input type="button" onclick="buttonClick()"/>

 

2级的典型特点是事件传播的阶段,(捕获阶段,直接目标阶段,起泡阶段),注意在第三个阶段“起泡阶段”在IE6中不支持。

在事件传播的过程中,可以随时用Event对象的stopPropagation()方法停止事件传播。

另外如<a>标签的href属性,是在三个事件阶段执行后,触发的href跳转,如果想阻止跳转,可以使用Event对象的preventDefault()方法阻止默认动作发生。

 

另外0级及2级的最主要区别还有一点:

0级只能为一些特定对象的特定类型的事件注册一个事件监听,但在2级模型中可以为特定对象的事件注册多个事件监听。

 

 

2级模型的Event接口的属性:

type: 发生的事件的类型。该属性的值是事件类型名,与注册事件处理程序时使用的字符串值相同(例如,“click"或“mouseover“)。


target: 发生事件的节点,可能与currentTarget不同。


currentTarget: 发生当前正在处理的事件的节点(如当前正在运行事件处理程序的节点)。如果在传播过程的捕捉阶段或起泡阶段处理事件,这个属性的值就与target属性的值不同。


eventPhase: 一个数字,指定了当前所处的事件传播过程的阶段。它的值是常量,可能值包括Event.CPATURING_PHASE,Event.AT_TARGET或Event.BUBBLING_PHASE。


timeStamp: 一个Date对象,声明了事件何时发生。


bubbles :一个布尔值,声明该事件(和这种类型的事件)是否在文档树中起泡。


cancelable: 一个布尔值,声明访事件是否具有能用preventDefault()方法取消默认动作。


除了这七个属性外,Event接口还定义了两个方法,即stopPropagation()和preventDefault(),所有事件对象都实现了它 们。调用stopPropagation()方法可以阻止事件从当前在处理它的节点传播。任何事件处理程序都可以调用preventDefault() 方法阻止浏览器执行与事件相关的默认动作。

分享到:
评论

相关推荐

    DOM文档对象模型中文参考手册.rar

    5. **事件处理**:DOM支持事件监听和处理,如`addEventListener()`和`removeEventListener()`,用于添加和移除事件处理器,以及`dispatchEvent()`用于触发事件。 6. **DOM Level和版本**:DOM有多个级别,包括核心...

    DOM事件的区别

    在这一级别中,事件处理函数是作为DOM元素的一个私有属性存在的。这意味着,如果尝试为同一元素绑定同一种类型的多个事件处理器,则后一个事件处理器会覆盖前一个事件处理器。例如: ```javascript // 为按钮绑定...

    W3C DOM模型参考手册

    ### W3C DOM模型参考手册知识点详解 #### 一、前言 本手册是一份针对W3C DOM(文档对象模型)模型的详尽参考指南,重点介绍了Gecko引擎所支持的DOM API特性。这份资料最初来自Mozilla开发网站,但由于各种原因,...

    事件模型探究及配套源码

    .NET(C#)事件模型也基于观察者模式,但提供了更高级别的抽象。C#使用事件关键字和委托类型来定义和处理事件,使得代码更加简洁和安全。事件的声明通常包含在类的私有区域,确保外部类不能随意触发它们。事件处理...

    js中DOM事件绑定分析

    总的来说,JavaScript的DOM事件绑定是实现动态Web页面的关键技术,而DOM2级事件模型的`addEventListener()`和`removeEventListener()`提供了更高级别的控制,使得事件处理更加灵活、可靠。随着浏览器对标准的支持度...

    xml-DOM教学PPT

    DOM的不同级别是由W3C(World Wide Web Consortium)制定的一系列规范。DOM1级主要定义了DOM的核心接口,包括基本的元素和属性节点。DOM2级扩展了DOM,增加了遍历文档、HTML文档结构、CSS操作、事件处理等接口。DOM3...

    Javascript 浏览器事件小结

    在浏览器执行Javascript代码时,事件处理与DOM模型紧密相关,允许开发者响应用户的行为和浏览器的动作。例如,当用户点击一个按钮或页面加载完成时,都可以触发相应的事件。 #### 2. 常用浏览器事件 浏览器事件...

    event-dom:DOM事件

    DOM事件模型由三个级别组成:DOM0级事件、DOM2级事件和DOM3级事件。DOM0级是最基础的,通过直接在元素上设置`addEventListener`和`removeEventListener`方法来添加和移除事件监听器。DOM2级引入了事件目标、事件流...

    DOM基础及DOM操作HTML

    DOM,全称为Document Object Model,中文译为文档对象模型,是W3C组织制定的一个标准,用于表示XML或HTML文档的一种结构化表示方式。DOM将整个文档视为一个由节点组成的树形结构,其中每个节点代表文档的一部分,如...

    xmldom.zip

    XMLDOM的主要组成部分包括节点树和API,它将XML文档转换为一个对象模型,开发者可以通过这些对象模型进行读取和修改。以下是关于XMLDOM的一些关键知识点: 1. 节点类型:XML文档由一系列节点构成,如元素节点、属性...

    DOM.zip_HTML dom_zip

    DOM是一个树状结构,其中每个节点代表文档的一部分,从根节点到叶节点分别对应文档的最高级别元素到最具体的元素或文本。"DOM.zip_HTML dom_zip"这个压缩包文件显然是关于DOM的中文参考资料,可能包含了一本详细的...

    DOM文档下载

    6. **DOM Level和版本**: DOM有多个级别,如DOM Level 1、DOM Level 2和DOM Level 3,每个级别都扩展了之前的API并引入了新功能。2010版的DOM文档可能包含了这些不同级别的规范。 7. **性能优化**: 对DOM的频繁操作...

    dom手册

    DOM有多个级别,每个级别扩展了前一个级别的功能。例如,DOM Level 1定义了基本的HTML和XML操作,DOM Level 2引入了CSS支持和事件处理,DOM Level 3增加了更多高级功能,如加载和保存文档。 **八、DOM性能优化** - ...

    dom手册(中文、英文)

    3. **事件处理**:DOM支持事件监听,手册可能会介绍如何绑定和解绑事件监听器,以及处理各种用户交互事件,如点击、滚动、提交表单等。 4. **DOM Level和版本**:DOM有多个级别,如DOM Level 1、2、3等,手册会解释...

    XML_DOM 教程 XML_DOM 教程

    在W3C(World Wide Web Consortium)的标准中,DOM被分为三个不同的部分或级别: 1. **核心DOM**:这是一个通用的标准模型,适用于任何结构化的文档,包括XML和HTML。 2. **XML DOM**:专门针对XML文档的标准模型,...

    dom4j pull parser

    使用Pull Parser,程序员可以控制解析过程,逐个处理XML事件,如开始元素、结束元素、文本节点等,而无需创建完整的文档对象模型(DOM)树。这种方式特别适合资源有限的环境或需要高效处理XML的场景。 Pull Parser...

    XML DOM 教程

    DOM(文档对象模型)是XML和HTML文档的一种标准表示方式,它提供了一种结构化的接口,允许程序和脚本动态地访问、修改以及更新XML文档。在JavaScript中,DOM是通过内置的DOM API来实现的,使得开发者能够用...

    DOM中文教程(chm)

    5. **事件处理**:了解DOM中的事件模型,包括事件冒泡和事件捕获。学习如何绑定和解绑事件监听器,以及如何处理各种用户交互事件,如点击、鼠标移动等。 6. **DOM操作实践**:通过实例学习如何用JavaScript实现DOM...

    【学习 XML DOM】.pdf

    【学习 XML DOM】.pdf 是一份关于 XML DOM(文档对象模型)的学习资料,XML DOM 是一种 W3C 标准,它定义了如何访问和操作XML文档的规范。DOM 将XML文档解析成一个树形结构,每个组成部分都称为一个节点。理解XML ...

Global site tag (gtag.js) - Google Analytics