js動(dòng)態(tài)添加的DIV中的onclick事件簡(jiǎn)單實(shí)例
最簡(jiǎn)單的是這樣:
<input type="button" onclick="alert(this.value)" value="我是 button" />
動(dòng)態(tài)添加onclick事件:
<input type="button" value="我是 button" id="bu"> <script type="text/javascript"> var bObj=document.getElementById("bu"); bObj.onclick= objclick; function objclick(){alert(this.value)}; </script>
如果使用匿名函數(shù) function(){},則如下面所示:
<input type="button" value="我是 button" id="bu"> <script type="text/javascript"> var bObj=document.getElementById("bu"); bObj.onclick=function(){alert(this.value)}; </script>
上面的方法其實(shí)原理都一樣,都是定義 onclick 屬性的值。值得注意的是,如果多次定義 obj.onclick,例如:obj.onclick=method1; obj.onclick=method2; obj.onclick=method3,那么只有最后一次的定義obj.onclick=method3才生效,前兩次的定義都給最后一次的覆蓋掉了。
再看 IE 中的 attachEvent:
<input type="button" value="我是拉登" id="bu"> <script type="text/javascript"> var bObj = document.getElementById("bu"); bObj.attachEvent("onclick",method1); bObj.attachEvent("onclick",method2); bObj.attachEvent("onclick",method3); function method1(){alert("第一個(gè)alert")} function method2(){alert("第二個(gè)alert")} function method3(){alert("第三個(gè)alert")} </script>
執(zhí)行順序是 method3 > method2 > method1 ,先進(jìn)后出,與堆棧中的變量相似。需要注意的是attachEvent 中第一個(gè)參數(shù)是on開(kāi)頭的,可以是 onclick/onmouseover/onfocus 等等
據(jù)說(shuō)(未經(jīng)確認(rèn)驗(yàn)證)在 IE 中使用 attachEvent 后最好再使用 detachEvent 來(lái)釋放內(nèi)存
再看看 Firefox 中的的 addEventListener:
<input type="button" value="我是布什" id="bu"> <script type="text/javascript"> var bObj = document.getElementById("bu"); bObj.addEventListener("click",method1,false); bObj.addEventListener("click",method2,false); bObj.addEventListener("click",method3,false); function method1(){alert("第一個(gè)alert")} function method2(){alert("第二個(gè)alert")} function method3(){alert("第三個(gè)alert")} </script>
可以看到,在 ff 中的執(zhí)行順序是 method1 > method2 > method3 , 剛好與 IE 相反,先進(jìn)先出。需要注意的是 addEventListener 有三個(gè)參數(shù),第一個(gè)是不帶“on”的事件名稱,如 click/mouseover/focus等。
以上這篇js動(dòng)態(tài)添加的DIV中的onclick事件簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- JS實(shí)現(xiàn)頁(yè)面中所有img對(duì)象添加onclick事件及新窗口查看圖片的方法
- JavaScript給按鈕綁定點(diǎn)擊事件(onclick)的方法
- js動(dòng)態(tài)添加onclick事件可傳參數(shù)與不傳參數(shù)
- IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法
- js給onclick事件賦值,動(dòng)態(tài)傳參數(shù)實(shí)例解說(shuō)
- js觸發(fā)asp.net的Button的Onclick事件應(yīng)用
- javascript 動(dòng)態(tài)改變onclick事件觸發(fā)函數(shù)代碼
- JavaScript onclick事件使用方法詳解
相關(guān)文章
jquery ajax應(yīng)用中iframe自適應(yīng)高度問(wèn)題解決方法
很多管理系統(tǒng)中,都使用iframe進(jìn)行信息內(nèi)容的展示方式,或者作為主菜單的鏈接展示內(nèi)容。使用iframe的問(wèn)題就是自適應(yīng)高度的問(wèn)題2014-04-04在Swiper內(nèi)如何制作CSS3動(dòng)畫效果示例代碼
這篇文章主要給大家介紹了關(guān)于在Swiper內(nèi)如何制作CSS3動(dòng)畫效果的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12javascript實(shí)現(xiàn)文字圖片上下滾動(dòng)的具體實(shí)例
這篇文章介紹了在JS中文字圖片上下滾動(dòng)的實(shí)現(xiàn)代碼,需要的朋友可以參考一下2013-06-06webpack 如何解析代碼模塊路徑的實(shí)現(xiàn)
這篇文章主要介紹了webpack 如何解析代碼模塊路徑的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09純js實(shí)現(xiàn)瀑布流展現(xiàn)照片(自動(dòng)適應(yīng)窗口大小)
用瀑布流來(lái)展現(xiàn)照片再好不過(guò)了,我的思路大概是一張一張的圖片插入,當(dāng)這一行的圖片保持長(zhǎng)寬比例不變并且高度低于250時(shí)就完成一個(gè)了循環(huán),即這一行插入進(jìn)去了2013-04-04window.name代替cookie的實(shí)現(xiàn)代碼
window.name代替cookie的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-11-11