好好学一遍JavaScript 札记(十一)——事件的类型

2012-09-03

好好学一遍JavaScript 笔记(十一)——事件的类型一事件的类型：根据触发事件的事物和事件发生的对象,可将浏览

好好学一遍JavaScript 笔记(十一)——事件的类型
一事件的类型：    根据触发事件的事物和事件发生的对象,可将浏览器中发生的事件分成几个类型。DOM标准定义了以下几组事件：

   鼠标事件：用户使用鼠标操作时触发；   键盘事件：用户敲击键盘、输入时触发；    HTML事件：窗口发生变动或者发生特定的客户端-服务端交互时触发；   突变事件：底层的DOM结构发生改变时触发。
1、鼠标事件    click——用户点击鼠标左键时发生(如果右键也按下则不会发生)。如果焦点在按钮上、敲回车也会触发该事件。   dblclick——用户双击鼠标左键时发生(如果右键也按下则不会发生)。   mousedown——用户点击任意一个鼠标按钮时发生。   mouseout——鼠标指针在某个元素上、且用户正要将其移出元素的边界时发生。   mouseover——鼠标移出某个元素、到另一个元素上时发生。   mouseup——用户松开任意一个按钮时发生。   mousemove——鼠标在某个元素上时持续发生。

<html>  <head>    <title>事件类型</title><script type="text/javascript">function testEventText(oEvent){var oText = document.getElementById("textId"); oText.value += "\n"+oEvent.type;oText.value += "\n keyCode is " + oEvent.keyCode;oText.value += "\n charCode is " + oEvent.charCode;var keys = [];if(oEvent.shiftKey){keys.push("Shift");}if(oEvent.ctrlKey){keys.push("Ctrl");}if(oEvent.altKey){keys.push("Alt");}oText.value += "\n keys down are " +keys;}</script>  </head>  <body>      <textarea id="textId"  rows="30" cols="100"></textarea>    <br/>      <textarea id="textKeyId" onkeydown="testEventText(event);"         onkeypress="testEventText(event);" onkeyup="testEventText(event);"          rows="30" cols="100"></textarea>    <br/>  </body></html>

2.2顺序    用户按一次某字符键时、会按以下顺序发生事件：
   (1)keydown;
   (1)keypress;
   (2)keyup.
   如果用户按一次某非字符键(例如Ctrl)、会按以下顺序发生事件：
   (1)keydown;
   (2)keyup.

   如果用户按下一个字符键且不放、keydown和keypress事件将逐个持续(keydown先触发)触发、直到松开按键；如果用户按下非字符按键且不放、将只有keydown事件持续触发。



3、HTML事件load事件——页面完全载入后、在window对象上触发；所有的框架都载入后、在框架集上触发；<img/>完全载入后、在其上触发；或者对于<object/>元素、当其完全载入后在其上触发。unload事件——页面完全卸载后、在window对象上触发；所有的框架都卸载后、在框架集上触发；<img/>完全卸载后、在其上触发；或者对于<object/>元素、当其完全卸载、在其上触发。abor事件——用户停止下载过程时、如果<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事件——任何元素或者窗口本身失去焦点时触发。

HTML事件下篇详细在写......

热点排行