javascript 動(dòng)態(tài)添加事件代碼
更新時(shí)間:2008年11月30日 16:51:56 作者:
往往我們需要在 JS 中動(dòng)態(tài)添加事件,這就涉及到瀏覽器兼容性問(wèn)題了,以下談及的幾種方法,我們也常?;旌鲜褂谩?/div>
方法一、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è)試");
}
也可寫(xiě)在一起
obj.attachEvent("onclick", function(){alert("測(cè)試");});
其它瀏覽器支持 addEventListener
obj.addEventListener("click", Foo, false);
function Foo()
{
alert("測(cè)試");
}
同樣也可寫(xiě)在一起
obj.addEventListener("click", function(){alert("測(cè)試");}, false);
注意 attachEvent 的事件帶 on,如 onclick,而 addEventListener 不帶 on,如 click。
順便說(shuō)一下 addEventListener 的第三個(gè)參數(shù)(雖然很少用) useCapture - 如果為 true,則 useCapture 指示用戶希望啟動(dòng)捕獲。啟動(dòng)捕獲后,所有指定類型的事件將在被指派到樹(shù)中其下面的任何 EventTargets 之前指派給已注冊(cè)的 EventListener。正在通過(guò)樹(shù)向上 bubbling 的事件將不觸發(fā)指定的使用捕獲的 EventListener。
綜合應(yīng)用
if (window.attachEvent)
{
//IE 的事件代碼
}
else
{
//其它瀏覽器的事件代碼
}
方法三、事件 = 函數(shù)
例:obj.onclick = Foo;
這在多個(gè)瀏覽器中均支持,這是屬于舊的規(guī)范(方法二屬于 DOM2 的規(guī)范),不過(guò)由于使用方便,用的場(chǎng)合也比較多。
下面是我的解決辦法:
function show(){
alert("Hello, world!!!");
}
obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()');
看起來(lái)很簡(jiǎn)單,也兼容瀏覽器,就是不知道還有沒(méi)有其他方面的影響,或者有更好的方法可以取代呢?
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è)試");
}
也可寫(xiě)在一起
obj.attachEvent("onclick", function(){alert("測(cè)試");});
其它瀏覽器支持 addEventListener
obj.addEventListener("click", Foo, false);
function Foo()
{
alert("測(cè)試");
}
同樣也可寫(xiě)在一起
obj.addEventListener("click", function(){alert("測(cè)試");}, false);
注意 attachEvent 的事件帶 on,如 onclick,而 addEventListener 不帶 on,如 click。
順便說(shuō)一下 addEventListener 的第三個(gè)參數(shù)(雖然很少用) useCapture - 如果為 true,則 useCapture 指示用戶希望啟動(dòng)捕獲。啟動(dòng)捕獲后,所有指定類型的事件將在被指派到樹(shù)中其下面的任何 EventTargets 之前指派給已注冊(cè)的 EventListener。正在通過(guò)樹(shù)向上 bubbling 的事件將不觸發(fā)指定的使用捕獲的 EventListener。
綜合應(yīng)用
if (window.attachEvent)
{
//IE 的事件代碼
}
else
{
//其它瀏覽器的事件代碼
}
方法三、事件 = 函數(shù)
例:obj.onclick = Foo;
這在多個(gè)瀏覽器中均支持,這是屬于舊的規(guī)范(方法二屬于 DOM2 的規(guī)范),不過(guò)由于使用方便,用的場(chǎng)合也比較多。
下面是我的解決辦法:
function show(){
alert("Hello, world!!!");
}
obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()');
看起來(lái)很簡(jiǎn)單,也兼容瀏覽器,就是不知道還有沒(méi)有其他方面的影響,或者有更好的方法可以取代呢?
您可能感興趣的文章:
- JS動(dòng)態(tài)創(chuàng)建元素的兩種方法
- JS中動(dòng)態(tài)創(chuàng)建元素的三種方法總結(jié)(推薦)
- JS動(dòng)態(tài)創(chuàng)建DOM元素的方法
- js 動(dòng)態(tài)創(chuàng)建 html元素
- js實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建的元素綁定事件
- JavaScript動(dòng)態(tài)創(chuàng)建div等元素實(shí)例講解
- javascript與jquery動(dòng)態(tài)創(chuàng)建html元素示例
- 淺析JS動(dòng)態(tài)創(chuàng)建元素【兩種方法】
- JS中動(dòng)態(tài)添加事件(綁定事件)的代碼
- javascript下給元素添加事件的方法與代碼
- js實(shí)現(xiàn)為a標(biāo)簽添加事件的方法(使用閉包循環(huán))
- JS實(shí)現(xiàn)為動(dòng)態(tài)創(chuàng)建的元素添加事件操作示例
相關(guān)文章
網(wǎng)頁(yè)中右鍵功能的實(shí)現(xiàn)方法之contextMenu的使用
本文介紹一種網(wǎng)頁(yè)中實(shí)現(xiàn)右鍵功能的方案–contextMenu,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02寫(xiě)了10年的Javascript也未必全了解的連續(xù)賦值運(yùn)算
很喜歡 蔡蔡 的這個(gè)標(biāo)題,實(shí)際蔡蔡已經(jīng)分析過(guò)了,這里借用了?;蛟S有點(diǎn)標(biāo)題黨的意思??赐昃椭恕?/div> 2011-03-03webpack打包html里面img后src為“[object Module]”問(wèn)題
這篇文章主要介紹了webpack打包html里面img后src為“[object Module]”問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12JS定時(shí)器實(shí)現(xiàn)數(shù)值從0到10來(lái)回變化
最近做項(xiàng)目遇到一需求要求實(shí)現(xiàn)數(shù)值從0到10來(lái)回變化,下面小編給大家分享下實(shí)現(xiàn)代碼,需要的朋友參考下2016-12-12JavaScript forEach 方法跳出循環(huán)的操作方法
這篇文章主要介紹了JavaScript forEach 方法跳出循環(huán)的操作方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01最新評(píng)論
最近更新的內(nèi)容
- 詳解webpack-dev-server的簡(jiǎn)單使用
- js判斷文本框剩余可輸入字?jǐn)?shù)的方法
- JS跳過(guò)debugger的幾種方法小結(jié)
- 解決window.opener=null;window.close(),只支
- JS中的回調(diào)函數(shù)實(shí)例淺析
- 微信小程序如何實(shí)現(xiàn)全局重新加載
- JavaScript之AOP編程實(shí)例
- 用roll.js實(shí)現(xiàn)的圖片自動(dòng)滾動(dòng)+鼠標(biāo)觸動(dòng)的特效
- 原生js實(shí)現(xiàn)復(fù)制對(duì)象、擴(kuò)展對(duì)象 類似jquery中的extend()方法
- JS+HTML5本地存儲(chǔ)Localstorage實(shí)現(xiàn)注冊(cè)登錄及驗(yàn)證功能示例