JavaScript的事件监听

本文借鉴了w3c的事件监听器文章。

常用事件监听方法

（1）绑定HTML元素属性：<input type="button" value="clickMe" onclick="check(this)">//其中check是个函数，传参为this
（2）绑定DOM对象属性：document.getElementById("xxx").onclick=函数;要注意的是，这里的函数后面不能加括号，不然就会直接调用。而且js代码要放在监听事件之后，不然没有解析到函数，就会报错。

标准dom事件监听：

举例：

document.getElementById("hi").addEventListener("click",displayDate);//运行按钮出现时间

addEventListener()为指定元素指定事件处理程序，可以向一个元素添加多个事件处理程序，可以向任何dom对象添加时间处理程序，包括window对象。
removeEventListener()删除事件监听器
使用方法：

element.addEventListener(event, function, useCapture);

第一个参数是事件类型，第二个是需要调用的函数，第三个是布尔值，为true是事件捕获，为false是事件冒泡。函数可以为外部具名函数，也可以直接在括号里写匿名函数，但要注意，removeEventListener（）不能移除匿名函数。布尔值可选，若是没写，默认为false。
注：事件不能使用前缀on，就直接写click等等就行
为元素附加事件处理程序而不会覆盖已有的事件处理程序

//为元素附加事件处理程序而不会覆盖已有的事件处理程序，也能够向相同的元素添加不同类型的事件。
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

兼容性

IE8，Opera6.0及其更早版本不支持这两种方法，所以对这些浏览器版本需要使用attachEvent()来添加事件处理程序，用detachEvent()来删除。
使用方法：

element.attachEvent(event, function);
element.detachEvent(event, function);

所以在针对跨浏览器的情况时，有如下解决方案：

var x=document.getElementById("myBtn");
if(x.addEventListener){
	//针对主流浏览器
	x.addEventListener("click",myFunction);
}else if(x.attachEvent){
	//针对IE8及更早版本浏览器
	x.attachEvent("onclick",myFunction);
}
//取消监听用的是detachEvent

这里插一个小知识点：
为了兼容不同的浏览器，在获取事件对象的时候一般采用如下方法：

op.onclick=function(oEvent){
	if(window.event){
		oEvent=window.event;
	}
}