JavaScript 事件处理详解

事件绑定与解绑：

el.onEventName = function (){}

document.getElementById("dom").onclick = function(){  } //绑定事件

document.getElementById("dom").onclick = null;          //移除绑定

dom0级事件，也就是最早期js处理事件的方式。事件绑定写法比较简单，但是有个致命的缺点，只能给一个元素的某一个行为绑定一次方法，第二次绑定的会把前面的覆盖掉。

document.getElementById("dom").onclick = function(){
     console.log("click");    //无法输出
}
document.getElementById("dom").onmouseover = function(){

    console.log("mouseover");  //可以输出
}

如上，触发 onclick 这个事件将不会任何反馈；

事件监听与移除监听:

el.addEventListener("EventName",function(){},false); 注:第一个参数:事件名;第二个参数:事件回调,第三个参数:表示是在事件捕获（true）或事件冒泡阶段（false）触发，默认false

dom2级事件,js规范更新后，提出的另一种事件处理方案，通过addEventListener方法去监听某个元素上的事件是否被触发，解决了多次绑定被覆盖的问题

document.getElementById("dom").addEventListener("click",function(){
    console.log("click1");  //输出
});
document.getElementById("dom").addEventListener("click",function(){
    console.log("click2");  //输出
});

removeEventListener 移除监听，注意，如果addEventListener 第二个参数是匿名函数， removeEventListener无法移除，如下

错误示范：

document.getElementById("dom").addEventListener("click",function(){});
document.getElementById("dom").removeEventListener("click",function(){})

正确示范：

function eventcallback(){

}
document.getElementById("dom").addEventListener("click",eventcallback);
document.getElementById("dom").removeEventListener("click",eventcallback);

缺点:IE9以下addEventListener /removeEventListener不兼容

既来之，则安之！

IE6~8 用 attachEvent/detachEvent

el.attrachEvent("onEventName",function(){  });     如：

el.attachEvent('onclick',function(){{});

detachEvent 移除事件 同removeEventListener 一样，无法移除 带匿名函数的事件
正确示范：

function eventcallback(){

}
document.getElementById("dom").attachEvent("onclick",eventcallback);
document.getElementById("dom").detachEvent("onclick",eventcallback);


如何去兼容所有浏览器:

function addEvent(el, eventName, fn, useCapture) 
{
    if (el.addEventListener) 
    {
        // Dom2
        el.addEventListener(eventName, fn, useCapture);
        return true;
    }
    else if (el.attachEvent) 
    {
        // IE6~8
        var r = el.attachEvent('on' + eventName, fn);
        return r;
    }
    else 
    {
       // Dom0
        el['on' + eventName] = fn;
    }
}

JavaScript 事件处理详解

事件绑定与解绑：

el.onEventName = function (){}

事件监听与移除监听:

IE6~8 用 attachEvent/detachEvent

猜你喜欢