有些時候需要動態載入javascript事件的一些方法
往往我們需要在JS 中動態加入事件,這就牽涉到瀏覽器相容性問題了,以下談到的幾種方法,我們也常常混合使用。
方法一、setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('測試');");
這裡利用setAttribute 指定onclick 屬性,簡單,很好理解,
但是:IE 不支持,IE 並不是不支援setAttribute 這個函數,而是不支援用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 的第三個參數(雖然很少使用) useCapture - 如果為true,則useCapture 指示使用者希望啟動擷取。啟動擷取後,所有指定類型的事件將在指派到樹中其下方的任何EventTargets 之前指派給已註冊的EventListener。正在透過樹向上bubbling 的事件將不會觸發指定的使用捕獲的EventListener。
綜合應用
複製代碼代碼如下:
if (window.attachEvent)
{
//IE 的事件程式碼
}
else
{
//其它瀏覽器的事件程式碼
}
方法三、事件= 函數
例:obj.onclick = Foo;
這在多個瀏覽器中均支持,這是屬於舊的規範(方法二屬於DOM2 的規範),不過由於使用方便,用的場合也比較多。
以下是我的解決辦法:
複製代碼代碼如下:
function show(){
alert("Hello, world!!!");
}
obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()');
attachEvent方法,為某一事件附加其它的處理事件。 (不支援Mozilla系列)
addEventListener方法用於Mozilla系列
舉例:
document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
如果這樣寫,那麼將會只有medhot3被執行
寫成這樣:
var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
執行順序為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);
執行順序為method1->method2->method3
使用實例:
1。
複製代碼代碼如下:
var el = EDITFORM_DOCUMENT.body;
//先取得對象,EDITFORM_DOCUMENT實為一個iframe
if (el.addEventListener){
el.addEventListener('click', KindDisableMenu, false);
} else if (el.attachEvent){
el.attachEvent('onclick', KindDisableMenu);
}
2。
複製代碼代碼如下:
if (window.addEventListener) {
window.addEventListener('load', _uCO, false);
} else if (window.attachEvent) {
window.attachEvent('onload', _uCO);
}