javascript 動態添加事件代碼
2019-11-21 01:32:27
供稿：網友
方法一、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()');
看起來很簡單，也兼容瀏覽器，就是不知道還有沒有其他方面的影響，或者有更好的方法可以取代呢？
