有些時(shí)候需要?jiǎng)討B(tài)加載javascript事件的一些方法
往往我們需要在 JS 中動(dòng)態(tài)添加事件,這就涉及到瀏覽器兼容性問(wèn)題了,以下談及的幾種方法,我們也常常混合使用。
方法一、setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('測(cè)試');");
這里利用 setAttribute 指定 onclick 屬性,簡(jiǎn)單,很好理解,
但是:IE 不支持,IE 并不是不支持 setAttribute 這個(gè)函數(shù),而是不支持用 setAttribute 設(shè)置某些屬性,包括對(duì)象屬性、集合屬性、事件屬性,也就是說(shuō)用 setAttribute 設(shè)置 style、onclick、onmouseover 這些屬性在 IE 中是行不通的。
方法二、用 attachEvent 和 addEventListener
IE 支持 attachEvent
obj.attachEvent("onclick", Foo);
function Foo()
{
alert("測(cè)試");
}
也可寫在一起
obj.attachEvent("onclick", function(){alert("測(cè)試");});
其它瀏覽器支持 addEventListener
obj.addEventListener("click", Foo, false);
function Foo()
{
alert("測(cè)試");
}
同樣也可寫在一起
obj.addEventListener("click", function(){alert("測(cè)試");}, false);
注意 attachEvent 的事件帶 on,如 onclick,而 addEventListener 不帶 on,如 click。
順便說(shuō)一下 addEventListener 的第三個(gè)參數(shù)(雖然很少用) useCapture - 如果為 true,則 useCapture 指示用戶希望啟動(dòng)捕獲。啟動(dòng)捕獲后,所有指定類型的事件將在被指派到樹中其下面的任何 EventTargets 之前指派給已注冊(cè)的 EventListener。正在通過(guò)樹向上 bubbling 的事件將不觸發(fā)指定的使用捕獲的 EventListener。
綜合應(yīng)用
例:obj.onclick = Foo;
這在多個(gè)瀏覽器中均支持,這是屬于舊的規(guī)范(方法二屬于 DOM2 的規(guī)范),不過(guò)由于使用方便,用的場(chǎng)合也比較多。
下面是我的解決辦法:
obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()');
addEventListener方法 用于 Mozilla系列
舉例:
document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
如果這樣寫,那么將會(huì)只有medhot3被執(zhí)行
寫成這樣:
var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
執(zhí)行順序?yàn)閙ethod3->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í)行順序?yàn)閙ethod1->method2->method3
使用實(shí)例:
1。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注