分享
 
 
 

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

王朝html/css/js·作者佚名  2006-12-16
窄屏简体版  字體: |||超大  

事件:冒泡、禁止与处理

单击一个按钮,移动鼠标指针到网页的一部分,在页面上选中一些文本——这些动作都会激发事件。一个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

[1] [2] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有