js動(dòng)態(tài)添加的DIV中的onclick事件簡單實(shí)例

更新時(shí)間：2016年07月25日 11:43:07 投稿：jingxian

下面小編就為大家?guī)硪黄猨s動(dòng)態(tài)添加的DIV中的onclick事件簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

最簡單的是這樣：

<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開頭的，可以是 onclick/onmouseover/onfocus 等等

據(jù)說(未經(jīng)確認(rèn)驗(yàn)證)在 IE 中使用 attachEvent 后最好再使用 detachEvent 來釋放內(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事件簡單實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

TypeScript模塊與命名空間的關(guān)系和使用方法
在TypeScript中就像在EC5中一樣,任何包含頂級import或export的文件都被認(rèn)為是一個(gè)模塊,下面這篇文章主要給大家介紹了關(guān)于如何在TypeScript使用模塊與命名空間以及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下
2023-03-03
asp.net中System.Timers.Timer的使用方法
asp.net中System.Timers.Timer的使用方法，需要的朋友可以參考一下
2013-03-03
擴(kuò)展JavaScript功能的正確方法(譯文)
JavaScript已經(jīng)內(nèi)置了很多強(qiáng)大的方法，但有時(shí)你需要的某個(gè)功能在內(nèi)置的方法中沒有，我們怎么來優(yōu)雅地?cái)U(kuò)展JavaScript功能呢
2012-04-04
一文帶你了解一下JavaScript中什么是嚴(yán)格模式
嚴(yán)格模式是?ECMAScript?5?引入的一種運(yùn)行模式,可以讓?JavaScript?在更加嚴(yán)格的條件下運(yùn)行,本文主要為大家詳細(xì)介紹了JavaScript中嚴(yán)格模式的使用,需要的可以參考下
2023-11-11
javascript簡寫常用的12個(gè)技巧（可以大大減少你的js代碼量）
這篇文章主要跟大家分享了javascript簡寫常用的12個(gè)技巧，通過這12個(gè)技巧可以大大減少你的js代碼量，看懂一種是入門，全懂就是大神，你能知道幾個(gè)呢？需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)下吧。
2017-08-08
同時(shí)使用n個(gè)window onload加載實(shí)例介紹
window onload加載多個(gè)同時(shí)使用，想必有很多人沒有用過吧，接下來為大家詳細(xì)介紹下具體的使用方法，感興趣的朋友可以參考下
2013-04-04
純前端使用ffmpeg實(shí)現(xiàn)視頻壓縮的具體方法及踩坑
這篇文章主要給大家介紹了關(guān)于純前端使用ffmpeg實(shí)現(xiàn)視頻壓縮的具體方法及踩坑,要在前端使用FFmpeg進(jìn)行視頻壓縮,你可以使用FFmpeg的JavaScript,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12
js調(diào)用百度地圖及調(diào)用百度地圖的搜索功能
本文給大家介紹js調(diào)用百度地圖的方法以及調(diào)用百度地圖的搜索功能，有需要的朋友可以跟著腳本之家的小編一起學(xué)習(xí)
2015-09-09
Javascript的并行運(yùn)算實(shí)現(xiàn)代碼
隨著多核cpu的普級,并發(fā)/并行多線程運(yùn)算在主流的編程語言越來越流行,而在目前Javascript實(shí)現(xiàn)中還看不到在語言方面支持多線程,現(xiàn)在Javascript如此流行,真希望今后會(huì)在語言的層面有很大的變化.
2010-11-11
javascript帶回調(diào)函數(shù)的異步腳本載入方法實(shí)例分析
這篇文章主要介紹了javascript帶回調(diào)函數(shù)的異步腳本載入方法,以實(shí)例形式較為詳細(xì)的分析了javascript回調(diào)函數(shù)實(shí)現(xiàn)異步載入的定義與使用技巧,需要的朋友可以參考下
2015-07-07