有些時候需要動態(tài)加載javascript事件的一些方法
往往我們需要在 JS 中動態(tài)添加事件，這就涉及到瀏覽器兼容性問題了，以下談及的幾種方法，我們也常?；旌鲜褂?。

方法一、setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('測試');");

這里利用 setAttribute 指定 onclick 屬性，簡單，很好理解，

但是：IE 不支持，IE 并不是不支持 setAttribute 這個函數(shù)，而是不支持用 setAttribute 設置某些屬性，包括對象屬性、集合屬性、事件屬性，也就是說用 setAttribute 設置 style、onclick、onmouseover 這些屬性在 IE 中是行不通的。

方法二、用 attachEvent 和 addEventListener
IE 支持 attachEvent

obj.attachEvent("onclick", Foo);
function Foo()
{
     alert("測試");
}

也可寫在一起
obj.attachEvent("onclick", function(){alert("測試");});
其它瀏覽器支持 addEventListener

obj.addEventListener("click", Foo, false);
function Foo()
{
     alert("測試");
}

同樣也可寫在一起
obj.addEventListener("click", function(){alert("測試");}, false);

注意 attachEvent 的事件帶 on，如 onclick，而 addEventListener 不帶 on，如 click。
順便說一下 addEventListener 的第三個參數(shù)（雖然很少用） useCapture - 如果為 true，則 useCapture 指示用戶希望啟動捕獲。啟動捕獲后，所有指定類型的事件將在被指派到樹中其下面的任何 EventTargets 之前指派給已注冊的 EventListener。正在通過樹向上 bubbling 的事件將不觸發(fā)指定的使用捕獲的 EventListener。

綜合應用

例：obj.onclick = Foo;
這在多個瀏覽器中均支持，這是屬于舊的規(guī)范（方法二屬于 DOM2 的規(guī)范），不過由于使用方便，用的場合也比較多。

下面是我的解決辦法:

addEventListener方法 用于 Mozilla系列

舉例:

document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;

如果這樣寫,那么將會只有medhot3被執(zhí)行

寫成這樣：
var btn1Obj = document.getElementById("btn1");

//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
執(zhí)行順序為method3->method2->method1

如果是Mozilla系列，并不支持該方法，需要用到addEventListener

var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);

執(zhí)行順序為method1->method2->method3

使用實例：

1。

最新評論