Javascript中事件处理程序

1、在DOM中，直接用onXXX="fun();"进行绑定（HTML中直接绑定）

事件绑定
事件处理程序
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);

原文链接:yinzhuo.online