1、在DOM中，直接用onXXX="fun();"进行绑定（HTML中直接绑定）
<button id = "btn" onclick ="fun()">事件绑定</button>
事件处理程序
var fun = function(){........}；
移除事件处理程序
fun = function(){}
优点：简单方便
缺点：js和html耦合度太高，每次修改函数要变动两个地方。
存在一个时差问题，用户可能会在HTML元素一出现就触发事件，但是事件处理程序没有加载好
2、在Javascript代码中用 DOM对象.onXXX=fun 进行绑定（通过js指定事件处理程序）
document.getElementById("btn").onclick = fun;//此处绑定的是函数名
移除事件处理程序
document.getElementById('btn').onclick = null;
优点：简单方便，有跨浏览器优势
缺点：存在时差问题
3、用 DOM对象.attachEvent("onXXX",fun) 进行绑定(IE事件处理程序)
var a = document.getElementById("btn")
a.attachEvent("onclick", fun);
// 移除句柄
a.detachEvent('onclick', fun);
接受两个参数，一个事件处理程序名称，一个事件处理函数匿名函数能被移除，参数必须相同）
优点：可以给一个元素添加多个事件处理程序，所有事件都会被添加到冒泡阶段，事件执行顺序逆序执行
4、DOM2级事件处理程序
var a = document.getElementById('btn');
a.addEventListener('click',function(){ });
// event: 事件名称
// function: 事件函数
// boolean: false | true, true 为事件捕获, false 为事件冒泡(默认);
Ele.addEventListener(event,function[,boolean]); // 添加句柄
Ele.removeEventListener(event,function[,boolean]); // 移除句柄（匿名函数能被移除，参数必须相同）
优点：可以给一个添加多个事件处理程序，事件执行顺序顺序执行
5、跨浏览器事件处理程序
如果我们既要支持IE的事件处理方法，又要支持 DOM 2级事件，那么就要封装一个跨浏览器的事件处理函数，如果支持 DOM 2级事件，就用addEventListener，否则就用attachEvent。例子如下
//跨浏览器事件处理程序
var eventUtil = {
// 添加句柄
addHandler: 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 oBtn = document.getElementById('btn');
function evtFn(){
alert('hello world');
}
eventUtil.addHandler(oBtn, 'click', evtFn);
eventUtil.removeHandler(oBtn, 'click', evtFn);
