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 对象中有关鼠标坐标的属性如下所示。

W3C 规范所规定的的属性
属性	描述
clientX	鼠标指针相对客户端（即浏览器文档区域）的水平坐标。
clientY	鼠标指针相对客户端（即浏览器文档区域）的垂直坐标。
screenX	鼠标指针相对计算机屏幕的水平坐标。
screenY	鼠标指针相对计算机屏幕的垂直坐标。

IE 浏览器特有属性
属性	描述
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(
        "相对客户端的坐标：
"+
        "x = "+x+"
"+
        "y = "+y+"

"+
        "相对屏幕的坐标：
"+
        "x = "+x1+"
"+
        "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>