DHTML对象模型 (二)

AI权益加码!Claude Code、Cursor等20+工具免费用! 购周边限时加赠Coding Plan Lite,畅享主流AI工具!学习进阶更高效! 阅读详情

事件:冒泡、禁止与处理
单击一个按钮,移动鼠标指针到网页的一部分,在页面上选中一些文本——这些动作都会激发事件。一个DHML的网页制作者可以编写代码以便在响应这些事件的时候运行,这段特定的代码通常称为事件句柄,因为它确实在处理事件。

事件处理不仅限于IE4.0和IE3.0,?Netscape?Navigator?3.x?和Communicator都支持事件处理。然而,在IE4.0中,无论是作为事件源的web页面Html元素,还是这些事件源引发的事件的种类,都已经被大大地扩展。以前,只有很少的一些HTML元素,好像锚点、图片热点、表单元素、application对象和object对象等,可以引发事件。在IE4.0事件模型中,页面上的每一个HTML元素都可以引发所有的鼠标和键盘事件。

下面的列表中列出了在IE4.0(及其后的更高版本—译者注)中,任一HTML元素都可激发的常用事件:

鼠标事件
?激发事件的用户行为:
?
onmouseover
?Moves?the?mouse?pointer?over?(that?is,?enters)?an?element.
?
onmouseout
?Moves?the?mouse?pointer?off?(that?is,?exits)?an?element.
?
onmousedown
?按下鼠标的任一件。
?
onmouseup
?释放鼠标的任一键。
?
onmousemove
?在元素的内部移动鼠标指针。
?
onclick
?在元素上单击鼠标左键。
?
ondblclick
?在元素上双击鼠标左键。
?
键盘事件
?激发事件的用户行为:
?
onkeypress
?按下并释放一个键(整个按下—弹起的过程).注意,若一个建被持续按下,多个onkeypress?事件将会被连续激发。
?
onkeydown
?按下按键,该事件只会被激发一次,即使该键被持续按下。
?
onkeyup
?释放按键
?

为了帮助网页制作者更紧凑、更简单和更容易维护地创建代码,IE4.o将事件冒泡作为处理事件的新方法。Microsoft?Windows?,?OS/2,?OSF?Motif,?和几乎所有其它的图形用户界面平台都是使用这种技术在它们的用户界面中处理事件的。但是对于HTML来说,事件冒泡却是一种新的方法,它提供了一个在Web文档上合成事件句柄的有效模型。

在以前,若一个HTML元素被激发了一个事件,但在这个元素上,相应的事件句柄并没有被注册,这个事件就会消失,不再被感觉到存在了。事件冒泡机制则把这个未处理的事件进一步向上传递给元素的父级元素。于是,这个事件继续在元素的层次结构中向上冒(像气泡向上冒一样),直到它被处理,或者到达了对象模型的顶层,document对象。

?

事件冒泡的有效性在于以下几点:

l???????????允许多个元素上的共同动作被统一处理。

l???????????减少Web页面上代码的数量。

l???????????减少更新文档时,要更改的代码的数量。

?

下面是一个事件冒泡的简单例子:

(例子的超级链接;

http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_01.htm?)




This?is?some?text




在这个页面中当用户在文本区域上移动鼠标指针时,将会弹出一个写有“OuterDiv”字样的对话框,若用户在图片上移动鼠标指针时,带有“InnerImg”字样的对话框将会弹出。

请注意,img对象的onmouseover事件是在该事件句柄没有在对象上注册的情况下被处理。为什么可以这样呢?因为onmouseover事件向上冒泡到了它的父级元素,div对象。由于在div对象上为onmouseover事件注册了事件句柄,它引发了事件处理并产生了上面所提到的对话框。

每次一个事件被激发,window对象的一个特殊的属性就会被创建。这个特殊的属性包括了事件对象(event对象)。这个事件对象包含了刚被激发的事件的上下文信息,例如鼠标位置、键盘状态以及最重要的这个事件的源元素。

???????源元素就是出发这个事件的元素,可以通过window.event对象的srcElement属性访问到它。

在上面的例子里,对话框显示的就是激发这个事件的源元素的id属性。

?

处理鼠标效果:
网页制作者可以通过制作鼠标效果来令页面的一部分在用户把鼠标指针移动到上面时作出交互反应。在IE4.0中创造鼠标效果的处理过程是十分简单的。

(例子的超级链接:

http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_02.htm?)






Milk
Cookies
Eggs
Ham
Cheese
Pasta
Chicken
?



在上面的例子中,7个span对象被使用item?样式类设置成了斜体。当鼠标指针在这7个元素中的任一个个上悬浮移动时,它的样式将会被改变成Highlight样式类指定的那样。

Internet?Explorer?4.0中的新功能带来了以下好处:

l?????????现在事件可以从span标记中被激发,而以前,网页制作者可能就必须先把每一个span的内容都包装在一个锚点标记(anchor)中,才能获得相应的事件。

l?????????使用事件冒泡,事件可以在文档对象(document?object)这个层次上被捕获。你不必为参与这个效果每个每个元素都注册一个独立的事件处理句柄。例如,假如网页制作者向页面添加HTML代码,这些附加的元素将会自动参与这个事件模型而不需改动哪怕一行的脚本代码。注意一点,文档对象(document?object)是在这个文档里面的所有元素的“超级父类”(super?parent)元素。

JS 基础(一):DHTML、DOM、BOM javascript相关技术要点 本文介绍了跟javascript相关的技术要点,其中包括js基础语法,js原型与原型链,js作用域和闭包,js异步等内容 文章目录javascript相关技术要点一、js基础语法1.1 数据类型1.2 数据类型转换1.3 等于与全等于1.4 truly变量与falsely变量、原型与原型链2.1 隐式原型与显式原型2.2 原型链总结 一、js基础语法 1.1 数据类型 常见值类型:number、string、boolean、undefined、Symbol('s') 阅读详情

相关推荐

DHTML对象模型(About the DHTML Object Model)()

事件:冒泡、禁止与处理单击一个按钮,移动鼠标指针到网页的一部分,在页面上选中一些文本——这些动作都会激发事件。一个DHML的网页制作者可以编写代码以便在响应这些事件的时候运行,这段特定的代码通常称为事件句柄,因为它确实在处理事件。事件处理不仅限于IE4.0和IE3.0, Netscape Navigator 3.x 和Communicator都支持事件处理。然而,在IE4.0中,无论是作为

heroyu的专栏 947

DHTML对象模型

什么是对象模型呢打个比方,我们可以把一个房间当作一个对象模型,那么房间里面的人,桌子就是一个个对象,而人的行为就可以看作对象的动作,而语言就可以当作是一个事件的触发DHTML对象模型和房间这个对象模型一样,可以让你访问浏览器的各个元素,可以访问正在浏览的web页面,也可以访问历史的页面.www协会指定的对象模型中主要有以下四个方面的内容:1)集合:是DHTML用来将HTML文档汇集到一个数

每天进步一点点 858

DHTML对象模型(About the DHTML Object Model)()

 【注:最近在学习asp.net,觉得javascript的很多知识在asp.net中仍很有用,又觉得javascript的实质是利用脚本对DHTML对象编程,但网上关于DHTML层次结构的中文资料又比较少,所以看了msdn上的这个资料后就翻译了出来,希望大家多多指教。】DHTML对象模型(About the DHTML Object Model)  动态HTML(DHTML)

heroyu的专栏 916

深入浅出JavaScript (四)DHTML

DHTML对象模型是将浏览器和HTML文件的标签都对象化,以便Javascript程序代码可以轻易地操控浏览器和访问HTML标签的对象.      DHTML并没有建立全新的HTML标签集和样式之间的关系,Script程序代码可以控制文件的元素,样式可以建立文件元素的编排,Script程序代码可以访问样式或初始化样式.      访问HTML文件的所有元素,将每一个HTML标签视为一个对象,使

李龙生 1万+

1.1什么是DHTML

1 DHTML 1.1 什么是DHTML   DHTML: Dynamic HTML 动态的HTML, 这门技术并不是一门新的技术, 而是将我们之前所学的HTML、CSS、JavaScript整合在一起,利用JS操作页面元素, 让元素具有动态的变化, 使得页面和用户具有交互的行为.   示例:点击div改变div的宽高及背景颜色.    1.2DHTML的原理 1.2.1DHT...

weixin_41704733的博客 4202

DHTML 属性

下面列出了动态 HTML(DHTML) 对象模型中的属性。标签属性/属性 !important 增加特定规则的重要性。 :active 设置当链接处于激活状态时 a 元素的样式。

圣彼得堡之光的专栏 690

DOM和DHTML[资料]

1. DOM的对象属性DOM提供了一套属性用于导航、访问和更新文档内容,其中包括只读类型的属性和可读写类型的属性。  下表是只读类型的属性:DOM对象属性 返 回 值FirstChild 返回一个对象(Object),表示第一个孩子节点(child node)。LastChild 返回一个对象(Object),表示最后一个孩子节点(child node)。NextSibling 返回一个对象(Ob

helanye的专栏 695

DHTML对象模型方法-innerHTML

*     DHTML对象模型方法为JavaScript提供了得到网页对象的另外方法,使用时可以不必具体了解文档对象模型的结构层次,而直接得到网页中的所需元素对象。这样,JavaScript就可以方便地改变网页内容及网页的表现方式。*     该对象模型方法具有如下特点。在HTML中,网页中的每一对标记就是一个元素对象,例如,<p></p>、< div><

gaotianle的专栏 985

JS应用DOM入门:和DHTML对象模型的比较

    DOM是文档对象化模型(Document Object Model)的简称。使用过DHTML对象模型的开发者一定能非常熟练地操作HTML页面上的每个标记内容,但如果借助DOM技术,我们就可以通过更加直接而且简易的方式达到同样的目的。   概要  DOM技术被Internet Explorer 5.0及以上版本的浏览器所支持,它采取一种非常直观且一致的方式将HTML文档进行模型化处理,并...

雪临凝冰xlnb 175

DHTML介绍

一. 概述 DHTML: Dynamic HTML 即动态的 html DHTML并不是一门新的技术, 而是将现有的HTML, CSS, JavaScript整合在一起, 形成了DHTML技术. DHTML分为BOM和DOM。 BOM:Browse Object Modle 即浏览器对象模型,其中封装了浏览器操作相关对象。 DOM:Document Object Modle 即文档对象模型,将整个HTML文档按照文档结构组织成了树形结构。 . BOM 2.1.window对象 此对象为

阳young的博客 1751

DHTML

DHTML概述 什么是DHTML DHTMK:Dynamic HTML 动态的 html DHTML不是一门新的技术,而是将已有的HTML、css、JS整合在了一起,实现了通过JS访问元素和css属性 在DHTML中,是通过JS访问html元素或者css属性,使得页面具有动态的变化,从而和用户具有了交互的行为 实例:通过点击按钮改变属性<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g

qq_46019010的博客 264

dhtml 简介 (附录dhtml参考手册)

DHTML是Dynamic HTML的简称,就是动态的html,是相对传统的静态的html而言的一种制作网页的概念。所谓动态HTML(Dynamic HTML,简称DHTML),其实并不是一门新的语言,它只是HTML、CSS和客户端脚本的一种集成,即一个页面中包括html+css+javascript(或其它客户端脚本),其中css和客户端脚本是直接在页面上写而不是链接上相关文件。DHTML不是一

水泽木兰 1311

JS应用DOM入门(1): 和DHTML对象模型的比较

这些文章都是我刚接触web编程时收藏下来的一些东东.我想如果要把网页做好,那么你对js操作页面元素必需熟悉,而dom是一项很好的技术 DOM是文档对象化模型(Document Object Model)的简称。使用过DHTML对象模型的开发者一定能非常熟练地操作HTML页面上的每个标记内容,但如果借助DOM技术,我们就可以通过更加直接而且简易的方式达到同样的目的。 ...

weixin_30496751的博客 160

加快 DHTML 的一组技巧

加快 DHTML 的一组技巧Mark DavisMicrosoft Corporation摘要:本文说明了某些 DHTML 功能对性能的重大影响,并提供了一些提高 DHTML 页面性能的技巧。目录简介成批处理 DHTML 更改使用 innerText使用 DOM 添加单个元素扩展 SELECT 元素中的选项用 DOM 更新表编写一次,使用多次请勿过多使用动态属性数据绑定很有效不要在

qpl007(蓝色闪电)的专栏 858
上一篇: DHTML对象模型 (一)(ZT)
下一篇: DHTML对象模型 (三)
foxmail
博客等级 码龄25年 11粉丝 92原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值