JavaScript笔记——事件的类型

来源：互联网发布：linux 查看已安装字体编辑：程序博客网时间：2024/05/10 01:40

根据触发事件的事物和事件发生的对象，可将浏览器中发生的事件分成几个类型。DOM标准定义了以下几组事件：

鼠标事件：用户使用鼠标进行特定操作时触发；
键盘事件：用户在键盘上敲击、键入时触发；
HTML事件：窗口发生变动或者发生特定的客户端-服务端交互时触发；
突变事件：底层的DOM结构发生改变时触发

鼠标事件：

鼠标事件是Web上最常用的事件类型。其中包含以下事件：

click——用户点击鼠标左键时发生（如果右键也按下则不会发生）。当用户的焦点在按钮上，并按下了回车键，同样会触发这个事件。
dblclick——用户双击鼠标左键时发生（如果右键也按下则不会发生）。
mousedown——用户点击任意一个鼠标按钮时发生。
mouseout——鼠标指针在某个元素上，且用户正要将其移出元素的边界时发生。
mouseover——用户移出某个元素，到另一个元素上时发生。
mouseup——用户松开任意一个按钮时发生。
mousemove——鼠标在某个元素上时持续发生。

页面上的所有元素都支持鼠标事件。下面的例子简单地简述了所有的鼠标事件。

<html><head><title>Mouse Events Example</title><script type="text/javascript">function handleEvent(oEvent) {var oTextbox = document.getElementById("txt1");oTextbox.value += "\n" + oEvent.type;}</script></head><body><p>Use your mouse to click and double click the red square.</p><div style="width: 100px; height: 100px; background-color: red"onmouseover="handleEvent(event)" onMouseOut="handleEvent(event)"onmousedown="handleEvent(event)" onMouseUp="handleEvent(event)"onmouseclick="handleEvent(event)" onmousedblclick="handleEvent(event)"id="div1"></div><p><textarea id="txt1" rows="15" cols="50"></textarea></p></body></html>

键盘事件：

键盘事件由用户对键盘的动作引发。有以下键盘事件：

keydown——用户在键盘上按下某按键时发生。一直按着某按键，它则会不断触发（Opera浏览器除外）
keypress——用户按下一个按键，并产生一个字符时发生（也就是不管类似Shift、Alt之类的键）。一直按下按键时，它则会持续发生。
keyup——用户释放按着的按键时发生。

尽管所有的元素都支持键盘事件但在文本框中输入文字时，可最容易看见这些事件。

<html><head><title>Key Events Example</title><script type="text/javascript">function handleEvent(oEvent) {var oTextbox = document.getElementById("txt1");oTextbox.value += "\n" + oEvent.type;}</script></head><body><p>Type some characters into the first textbox.</p><p><textarea id="txtInput" rows="15" cols="50"onkeydown="handleEvent(event)" onKeyUp="handleEvent(event)"onkeypress="handleEvent(event)"></textarea></p><p><textarea id="txt1" rows="15" cols="50"></textarea></p></body></html>

HTML事件：

HTML事件分类是由原来从IE4.0和Netscape4.0的开发人员创建的事件模型中遗留下了的很多事件组成的。

load事件——页面完全载入后，在window对象上触发；所有的框架都载入后，在框架集上触发；<img/>完全载入后，在其上触发；或者对于<object/>元素，当其完全载入后在其上触发。
unload事件——页面完全卸载后，在window对象上触发；所有的框架都卸载后，在框架集上触发；<img/>完全卸载后，在其上触发；或者对于<object/>元素，当其完全卸载后在其上触发。
abort事件——用户停止下载过程时，如果<object/>对象还未完全载入，就在其上触发。
error事件——JavaScript脚本出错时，在window对象上触发；某个<img/>的指定图像无法栽入时，在其上触发；或<object/>元素无法载入时触发；或者框架集中的一个或多个框架无法载入时触发。
select事件——用户选择了问不看看中的一个或多个字符时触发(<input/>或者<textarea/>)。
change事件——文本框(<input/>或者<textarea/>)失去焦点时并且在它获取焦点后内容发生改变时触发；某个<select/>元素的值发生改变时触发。
submit事件——点击提交按钮（<input type="submit" />）时，在<form/>上触发。
reset事件——点击重置按钮（<input type="reset">）时，在<form/>上触发。
resize事件——窗口或者框架的大小发生变化时触发。
scroll事件——用户在任何带滚动条的元素上卷动它时触发。<body/>元素包含载入页面的滚动条。
focus事件——任何元素或者窗口本身获取焦点时（用户点击它、Tab键切换到它或者任何其他与它交互的手段）触发
blur事件——任何元素或者窗口本身失去焦点时触发

变化事件：

虽然变化事件已经是DOM标准的一部分，但是目前还没有任何主流的浏览器实现了它。变化事件包括：

DOMSubtreeModified——当文档或者元素的子树因为添加或者删除节点而改变时触发
DOMNodeInserted——当一个节点作为另一个节点的子节点插入时触发
DOMNodeRemoved——当一个节点作为另一个节点的子节点被删除时触发
DOMNodeRemovedFromDocument——当一个节点从文档中删除时触发
DOMNodeInsertedIntoDocument——当一个节点插入到文档中时触发。

这些事件的目的是，提供一个独立于语言的事件范例，使其可使用在所有基于XML的语言中（诸如XHTML,SVG和一些更新的语言如MathML等）。