JavaScript事件
JavaScript处理事件的基本机制：
- 对DOM元素绑定事件处理函数；
- 监听用户的操作；
- 当用户在相应的DOM元素上进行与绑定事件对应的操作时，事件处理函数做出响应；
- 将处理结果更新到 HTML 文档。
有三种常用的绑定事件的方法：
在DOM元素中直接绑定；
原生函数:<input onclick="alert('谢谢支持')" type="button" value="点击我，弹出警告框" />
自定义函数:<input onclick="myAlert()" type="button" value="点击我，弹出警告框" /> <script type="text/javascript"> function myAlert(){ alert("谢谢支持"); } </script>
在JavaScript代码中绑定；
<input id="demo" type="button" value="点击我，显示 type 属性" /> <script type="text/javascript"> document.getElementById("demo").onclick=function(){ alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素，这里是<div>标签 } </script>
绑定事件监听函数
绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。
addEventListener()函数语法：
elementObject.addEventListener(eventName,handle,useCapture);
| 参数 | 说明 |
|---|---|
| elementObject | DOM对象（即DOM元素）。 |
| eventName | 事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。 |
| handle | 事件句柄函数，即用来处理事件的函数。 |
| useCapture | Boolean类型，是否使用捕获，一般用false 。这里涉及到JavaScript事件流的概念，后续章节将会详细讲解。 |
attachEvent()函数语法：
elementObject.attachEvent(eventName,handle);
| 参数 | 说明 |
|---|---|
| elementObject | DOM对象（即DOM元素）。 |
| eventName | 事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。 |
| handle | 事件句柄函数，即用来处理事件的函数。 |
注意：事件句柄函数是指“ 函数名 ”，不能带小括号。
addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。
下面绑定事件的代码，进行了兼容性处理，能够被所有浏览器支持：
function addEvent(obj,type,handle){ try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本 obj.addEventListener(type,handle,false); }catch(e){ try{ // IE8.0及其以下版本 obj.attachEvent('on' + type,handle); }catch(e){ // 早期浏览器 obj['on' + type] = handle; } } }
这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句，避免浏览器出现错误提示。
例如，为一个 id="demo" 的按钮绑定事件，鼠标单击时弹出警告框：
addEvent(document.getElementById("demo"),"click",myAlert);
function myAlert(){
alert("又是一个警告框");
}
JavaScript所支持的事件，可以分为以下几类：
- 窗口事件 (Window Events)
- 表单元素事件 (Form Element Events)
- 图像事件 (Image Events)
- 键盘事件 (Keyboard Events)
- 鼠标事件 (Mouse Events)
表单元素事件 (Form Element Events)
仅在表单元素中有效。
| 事件 | 说明 | 演示 |
|---|---|---|
| onchange | 当元素（select 、复选框 等）改变时执行脚本 | |
| onsubmit | 当表单（form）被提交时执行脚本 | |
| onreset | 当表单被重置时执行脚本 | |
| onselect | 当元素被选取时执行脚本 | |
| onblur | 当元素失去焦点时执行脚本 | |
| onfocus | 当元素获得焦点时执行脚本 |
图像事件 (Image Events)
该属性可用于 img 元素：
| 事件 | 说明 |
|---|---|
| onabort | 当图像加载中断时执行脚本 |
键盘事件 (Keyboard Events)
在下列元素中无效：base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。
| 事件 | 说明 | 演示 |
|---|---|---|
| onkeydown | 当键盘被按下时执行脚本 | |
| onkeypress | 当键盘被按下后又松开时执行脚本 | |
| onkeyup | 当键盘被松开时执行脚本 |
鼠标事件 (Mouse Events)
在下列元素中无效：base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。
| 事件 | 说明 | 演示 |
|---|---|---|
| onclick | 当鼠标被单击时执行脚本 |
在这里单击鼠标
|
| ondblclick | 当鼠标被双击时执行脚本 |
在这里双击鼠标
|
| onmousedown | 当鼠标按钮被按下时执行脚本 |
在这里按下鼠标
|
| onmousemove | 当鼠标指针移动时执行脚本 |
在这里移动鼠标
|
| onmouseout | 当鼠标指针移出某元素时执行脚本 |
将鼠标移动到这里再离开
|
| onmouseover | 当鼠标指针悬停于某元素之上时执行脚本 |
将鼠标移动到这里
|
| onmouseup | 当鼠标按钮被松开时执行脚本 |
按下鼠标再松开
|
窗口事件 (Window Events)
仅在 body 和 frameset 元素中有效。
| 事件 | 说明 |
|---|---|
| onload | 当网页被载入时执行脚本。 |
| onunload | 当网页被关闭时执行脚本。 |
鼠标坐标包括 x 坐标、y 坐标、相对于客户端的坐标、相对于屏幕的坐标等。
在JavaScript中，鼠标坐标是作为event对象的属性存在的。
event 对象中有关鼠标坐标的属性如下所示。
| 属性 | 描述 |
|---|---|
| clientX | 鼠标指针相对客户端（即浏览器文档区域）的水平坐标。 |
| clientY | 鼠标指针相对客户端（即浏览器文档区域）的垂直坐标。 |
| screenX | 鼠标指针相对计算机屏幕的水平坐标。 |
| screenY | 鼠标指针相对计算机屏幕的垂直坐标。 |
| 属性 | 描述 |
|---|---|
| offsetX | 发生事件的地点在事件源元素的坐标系统中的水平坐标。 |
| offsetY | 发生事件的地点在事件源元素的坐标系统中的垂直坐标。 |
| x | 事件发生的位置的水平坐标，它们相对于用CSS动态定位的最内层包容元素。 |
| y | 事件发生的位置的垂直坐标，它们相对于用CSS动态定位的最内层包容元素。 |
<html> <head> <title>获取鼠标的坐标信息</title> </head> <body> <div id="demo">点击这里</div> <script type="text/javascript"> document.getElementById("demo").onclick=function(e){ var eve = e || window.event; var x = eve.clientX, // 相对于客户端的X坐标 y = eve.clientY, // 相对于客户端的Y坐标 x1 = eve.screenX, // 相对于计算机屏幕的X坐标 y1 = eve.screenY; // 相对于计算机屏幕的Y坐标 alert( "相对客户端的坐标：\n"+ "x = "+x+"\n"+ "y = "+y+"\n\n"+ "相对屏幕的坐标：\n"+ "x = "+x1+"\n"+ "y = "+y1 ); } </script> </body> </html>
事件源是指发生事件的DOM节点（HTML元素）。
事件源是作为event对象的属性存在的。在W3C规范中，这个属性是 target ；但是 IE8.0 及其以下版本不支持该属性，它使用 srcElement 属性来获取事件源。
这里要注意一点， || 运算的返回值不一定是 Boolean 类型，当 || 运算的两个操作数中有一个为真时，将返回该操作数本身的值。上面的代码，如果 event 随函数的参数传入，e 为真，eve=e；如果作为 window 对象的属性，window.event 为真，eve=window.event 。
<html> <head> <title>获取鼠标的坐标信息</title> </head> <body> <div id="demo">点击这里</div> <script type="text/javascript"> document.getElementById("demo").onclick=function(e){ var eve = e || window.event; var srcNode = eve.target || eve.srcElement; // 兼容所有浏览器 alert(srcNode); } </script> </body> </html>
取消浏览器默认动作
对于遵循 W3C 规范的浏览器，使用 event 对象的 preventDefault() 方法来取消默认动作；但是 IE8.0 及其以下版本不支持该方法，它通过对 event 对象的 returnValue 属性赋值 false 来取消默认动作。
<html> <head> <title>取消<a>标签的默认动作</title> </head> <body> <a id="demo" href="http://www.baidu.com" target="_blank">点击这里试试</a> <script type="text/javascript"> document.getElementById("demo").onclick=function(e){ var eve = e || window.event; try{ // 使用 try...catch 语句避免浏览器出现错误提示 eve.preventDefault(); // 非 IE 浏览器 }catch(e){ eve.returnValue = false; // IE8.0 及其以下版本 } } </script> </body> </html>
