1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

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

作者:用户 来源:互联网 时间:2016-02-04 12:09:50

鼠标对象事件元素处理一个onmouseover事件

DHTML对象模型(About the DHTML Object Model)(二) - 摘要: 本文讲的是DHTML对象模型(About the DHTML Object Model)(二), dhtml|model|object|对象|dhtml 事件:冒泡、禁止与处理单击一个按钮,移动鼠标指针到网页的一部分,在页面上选中一些文本——这些动作都会

dhtml|model|object|对象|dhtml 事件:冒泡、禁止与处理
单击一个按钮,移动鼠标指针到网页的一部分,在页面上选中一些文本——这些动作都会激发事件。一个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 )

<HTML>
<BODY>
<DIV id=OuterDiv style="background-color: red" onmouseover="alert(window.event.srcElement.id);">
This is some text
<IMG id=InnerImg>
</DIV>
</BODY>
</HTML>
在这个页面中当用户在文本区域上移动鼠标指针时,将会弹出一个写有“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 )

<HTML>
<HEAD>
<STYLE>
.Item {
cursor: hand;
font-family: verdana;
font-size: 20;
font-style: normal;
background-color: blue;
color: white
}
.Highlight {
cursor: hand;
font-family: verdana;
font-size: 20;
font-style: italic;
background-color: white;
color: blue
}
</STYLE>
</HEAD>
<BODY>
<SPAN class=Item>Milk</SPAN>
<SPAN class=Item>Cookies</SPAN>
<SPAN class=Item>Eggs</SPAN>
<SPAN class=Item>Ham</SPAN>
<SPAN class=Item>Cheese</SPAN>
<SPAN class=Item>Pasta</SPAN>
<SPAN class=Item>Chicken</SPAN>

<SCRIPT>
function rollon() {
if (window.event.srcElement.className == "Item") {
window.event.srcElement.className = "Highlight";
}
}

[1] [2] 下一页  



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索鼠标 , 对象 , 事件 , 元素 , 处理 , 一个 onmouseover事件 objectivec对象模型、dhtmlxtreeobject api、dhtmlxtreeobject、object model、browser object model,以便于您获取更多的相关知识。

IE里的探索之定制浏览器好助手(下)

...作者:青苹果工作室编译 2001年02月08日 14:00)访问文档对象   现在 BHO 引用了 Internet Explorer 的 WebBrowser 控件并已经连接到浏览器 以接收它产生的事件。在 Web 页面被完全下载并被正确地初始化之后,现在终于可以通过 DHTML ...

BOM与DOM的区别分析

...主及在宿主中输出的Web页面之间的交互,这种交互是通过对象这个技术手段实现的。 BOM与DOM的区别 # DHTML技术各项功能的实现都依赖于使用客户端脚本与浏览器宿主及在宿主中输出的Web页面之间的交互,这种交互是通过对象这...

All About Jack

...bark on a refactor that will leverage remote APIs and aggregated real-time object based event streams. I haven't written a line of CoffeeScript since I started, and I don't really miss it. My side projects have started including a lot more `package.json` files. I might have secret crush on JavaScrip...

BOM与DOM的区别分析

...主及在宿主中输出的Web页面之间的交互,这种交互是通过对象这个技术手段实现的。 §BOM即Browser Object Model浏览器对象模型,是在客户端脚本核心的基础上实现的扩展API,通过该API可以使用脚本访问浏览器窗口及其文档对象的各...

脚本技术应用ABC

...、帧和表格等的有机组合,想到了 这一点,就会对文档对象模型(Document Object Model)有个粗略的认识。World Wide Web 代理 (W3C)对此所做的标准的说明详细地阐述了web页面中内容的层次及访问的路径。     DHTML是一个名称,它通...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备