事件就是用户或浏览器自身执行的某种活动。诸如click、load和mouseover,都是事件的名字。而响应某个事件的函数就叫事件处理程序（或事件侦听器）。
HTML事件处理程序
1、某个元素支持的每种事件，都可以用一个与相应事件处理程序同名的HTML特性来指定。
例如：
<input type="button" value="Click Me0" onclick="alert('Clicked')">
<input type="button" value="Click Me1" onclick="alert('"Clicked"')" />
2、在HTML中定义的事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本，像下面的例子：
<script>
function showMessage(){
alert("Hello JavaScript!");
}
</script>
<input type="button" value="Click Me" onclick="showMessage()" />
HTML事件处理程序的两个缺点：（1）存在时差问题，用户可能会在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。（2）扩展事件处理程序的作用域链在不同的浏览器中会导致不同的结果。
DOM0级事件处理程序
把一个方法赋值给一个元素的事件处理程序属性。（此时事件处理程序在元素的作用域中运行）
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert("Clicked");
}
可以通过将事件处理程序设置为null来删除事件处理程序。
DOM2级事件处理程序
“DOM2级事件”定义了两个方法addEventListener()和removeEventListener()来处理指定和删除事件处理程序的操作。他们都接受三个参数，要处理的事件名、作为事件处理程序的函数和一个布尔值。如果布尔值为true,表示在捕获阶段调用事件处理程序；如果是false,表示在冒泡阶段调用事件处理程序。
var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
btn.addEventListener("click",function(){
alert("Hellow World!");
},false);
当为按钮添加了两个事件处理程序时，事件处理程序会按照添加它们的顺序触发。
IE事件处理程序
IE中添加了attachEvent()和detachEvent()方法，它们都接受相同的两个参数：事件处理程序名称与事件处理程序函数。IE事件处理程序会在全局作用域中运行，与DOM0级方法不同（DOM0级事件处理程序在其所属元素的作用域中运行。）
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick",function(){
alert("Clicked");
});
btn.attachEvent("onclick",function(){
alert("Hello World");
});
上面这段代码，在书上说事件处理程序是以相反的顺序被触发的，但我在IE上运行时发现在IE8及以下浏览器时，确实如此，但IE9及以上却是按添加它们的顺序执行的。
跨浏览器的事件处理程序
先创建addHandler()方法，（该方法属于EventUtil对象）来视情况分别使用DOM0级方法、DOM2级方法或IE方法来添加事件。addHandler()方法接受三个参数，要操作的元素，事件名称和事件处理程序函数。
var EventUtil = {
addHandler: function(element,type,handler){
if(element.addEventListener){ //是否存在DOM2级方法
element.addEventListener(type,handler,false);
}else if (element.attachEvent){ //是否存在IE方法
element.attachEvent("on"+type,handler); //事件类型加上"on"前缀，是为了在IE8及更早版本中运行
}else{ //使用DOM0级方法
element["on"+type] = handler;
}
},
removeHandler: function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if (element.attachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type] = null;
}
}
};
var handler = function(){
alert("Clicked");
}
EventUtil.addHandler(btn,"click",handler);
// EventUtil.removeHandler(btn,"click",handler); 移除事件