JavaScript加強(qiáng)之自定義event事件
更新時(shí)間：2013年09月21日 16:04:56 作者：
event事件在本文以自定義的方式出現(xiàn)，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
復(fù)制代碼 代碼如下:
$().ready(function(){
for(var i=0;i<5;i++){
/**
* 這種寫法不專業(yè),如果處于循環(huán)里,就會(huì)注冊5次事件,點(diǎn)擊后alert5次
*/
// $("#aa").click(function(){
// alert("hahahaha");
// });
/**
* 這種寫法才是專業(yè)的,在注冊一次點(diǎn)擊事件前,先解綁點(diǎn)擊事件,然后再綁定一個(gè)點(diǎn)擊事件,所以到最后只綁定了一次點(diǎn)擊事件
*/
$("#aa").unbind("click");
$("#aa").bind("click",function(){
alert("oooooo");
});
}
});
自定義事件:
復(fù)制代碼 代碼如下:
$().ready(function(){
/**
* 自定義事件,在click的時(shí)候進(jìn)行觸發(fā)
*/
$("#aa").bind("click",function(){
//事件觸發(fā)器,觸發(fā)自定義的event
$(this).trigger("點(diǎn)我");
});
//自定義一個(gè)"點(diǎn)我"事件
$("#aa").unbind("點(diǎn)我");
$("#aa").bind("點(diǎn)我",function(){
alert("點(diǎn)我");
});
});
傳遞參數(shù)的自定義事件:
復(fù)制代碼 代碼如下:
$().ready(function(){
/**
* 自定義事件,在click的時(shí)候進(jìn)行觸發(fā)
*/
$("#aa").bind("click",function(){
//事件觸發(fā)器,觸發(fā)自定義的event,傳遞實(shí)參
$(this).trigger("點(diǎn)我",['張三','李四']);
});
//自定義一個(gè)"點(diǎn)我"事件
$("#aa").unbind("點(diǎn)我");
//第一個(gè)參數(shù)是固定的,后面都是自定義,就算把event寫成別的名字,它還是固定類型,鼠標(biāo)事件
$("#aa").bind("點(diǎn)我",function(event,a,b){
alert("點(diǎn)我");
alert(a);
alert(b);
});
});
練習(xí):
寫一個(gè)自定義事件,把該事件綁定在一個(gè)下拉列表框中
當(dāng)下拉列表框選中一項(xiàng)的時(shí)候,觸發(fā)該事件,以參數(shù)的形式把選中的值傳遞到自定義事件中,并輸出。
html:
復(fù)制代碼 代碼如下:
<select id="select">
<option value="111">111</option>
<option value="222">222</option>
<option value="333">333</option>
</select>
js:
復(fù)制代碼 代碼如下:
$().ready(function(){
$("option").unbind("click");
$("option").bind("click",function(){
$(this).trigger("選擇并顯示",[$(this).val()]);
});
$("option").unbind("選擇并顯示");
$("option").bind("選擇并顯示",function(event,value){
alert(value);
});
});
相關(guān)文章
JavaScript基于replace+正則實(shí)現(xiàn)ES6的字符串模版功能
這篇文章主要介紹了JavaScript基于replace+正則實(shí)現(xiàn)ES6的字符串模版功能,結(jié)合實(shí)例形式分析了replace結(jié)合正則實(shí)現(xiàn)ES6字符串模板功能的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
JS/FLASH實(shí)現(xiàn)復(fù)制代碼到剪貼板(兼容所有瀏覽器)
使用javascript來寫復(fù)制到剪貼板的代碼，一般都是瀏覽器不兼容的。所以采用flash的方式，模擬一個(gè)層，再來復(fù)制，就可以做到全部瀏覽器都適用，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈2013-05-05
大家都喜歡用innerHTML添加內(nèi)容，但是innerHTML這東西在兩大陣營中有許多不同。2010-02-02
又一款js時(shí)鐘!transform實(shí)現(xiàn)時(shí)鐘效果
又一款js時(shí)鐘!這篇文章主要為大家詳細(xì)介紹了transform實(shí)現(xiàn)的時(shí)鐘效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了bootstrap響應(yīng)式工具使用的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頂部搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
如何判斷對(duì)象是否為空是我們在開發(fā)過程中經(jīng)常遇到的問題,今天我們將討論幾種常用的方法,以及如何在不同的場景中使用它們,接下來、一起看看吧,對(duì)你肯定有幫助2024-01-01
跟我學(xué)習(xí)javascript的prototype使用注意事項(xiàng)
跟我學(xué)習(xí)javascript的prototype使用注意事項(xiàng)，介紹了在使用prototype的幾點(diǎn)注意事項(xiàng)，需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)滑動(dòng)條案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要給大家介紹了關(guān)于JavaScript判斷奇偶數(shù)的2種方法,奇數(shù)和偶數(shù)的判斷是數(shù)學(xué)運(yùn)算中經(jīng)常碰到的問題,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10