方法一、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()');
看起來很簡單,也相容瀏覽器,就是不知道還有沒有其他方面的影響,或者有更好的方法可以取代呢?