事件处理程序

事件就是用户或者浏览器自身执行的某种动作，而响应某个事件的函数就叫做事件处理程序。

1. HTML事件处理程序

某个元素支持的每种事件，都可以用一个与相应事件处理程序同名的HTML特性来指定。

<input type="button" value="btn" onClick="alert('hello')" />

or：

<script type="text/javascript">
	function showMessage(){
		alert("hello world");
	}
</script>
<input type="button" value="btn" onClick="showMessage()" />

2. DOM0级事件处理程序

通过js指定事件处理程序的传统方式，将一个函数赋值给一个事件处理程序属性。优点是简单和有跨浏览器的优势。

var btn = document.getElementById("btn");
btn.onclick = function(){
	alert("hello world")
}
//onclick要小写

使用DOM0级方法指定的事件处理程序被认为是元素的方法，this指向当前的元素。

也可以删除通过DOM0级方法指定的事件处理程序：

1	btn.onclick = null;

3. DOM2级事件处理程序

“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener(), removeEventListener().
这两个方法接受3个参数，第一个是事件名称，第二个是事件处理程序的函数，第三个是一个布尔值，true为捕获阶段调用事件处理程序，false为冒泡阶段调用事件处理程序。

var btn = document.getElementById("btn");

btn.addEventListener("click", function(){
	alert("hello");
}, fasle);

//通过addEventListener添加的匿名函数将无法移除

移除事件：

function showMessage(){
	alert("hello world");
}

btn.addEventListener("click", showMessage, false);
btn.removeEventListener("click", showMessage, false);

DOM2级方法添加事件处理程序的主要好处是可以添加多个一样的事件，它们会按照顺序依次触发（从第一个到最后一个）。
大多数情况下都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度的兼容各种浏览器。

4. IE事件处理程序

IE中实现的方法是attachEvent()和detachEvent().这两个方法接受两个参数，分别是事件处理程序的名称和事件处理程序的函数。由于ie8及更早的版本只支持事件冒泡，所以通过该方法添加的事件处理程序都是发生在事件冒泡阶段。

btn.attchEvent("onclick", function(){
	alert(this == window);   // true
})
//注意点：
//1. 第一个参数是onclike，包含on
//2. 使用attachEvent绑定的事件是在全局作用域下执行，所有函数内部的this为window
//3. 同样匿名函数无法移除

移除事件：

function showMessage(){
	alert("hello world");
}

btn.attachEvent("click", showMessage);
btn.detachEvent("click", showMessage);

使用attachEvent方法也可以为同一个元素添加多次同一个事件，这些事件都会执行，但是先执行最后一个，依次执行到第一个。

支持ie事件处理程序的浏览器有ie和opera。

5. 跨浏览器的事件处理程序

var EventUtil = {
	addHander: function(element, type, handler){
		if(element.addEventListener){
			element.addEventListener(type, handler, false);
		} else if(element.attachEvent){
			element.attachEvent('on'+type, handler);
		} else {
			element['on'+type] = handler;
		}	
	},

	removeHandler: function(element, type, handler){
		if(element.removeEventListener){
			element.removeEventListener(type, handler, false);
		} else if(element.detachEvent){
			element.detachEvent('on'+type, handler);
		} else {
			element['on'+type] = null;
		}
	}
}


var btn = document.getElementById('btn');
function show(){
	alert('hello world');
}

EventUtil.addHandler(btn, "click", show);
EventUtil.removeHandler(btn, 'click', show);