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++){
/**
* 這種寫(xiě)法不專業(yè),如果處于循環(huán)里,就會(huì)注冊(cè)5次事件,點(diǎn)擊后alert5次
*/
// $("#aa").click(function(){
// alert("hahahaha");
// });
/**
* 這種寫(xiě)法才是專業(yè)的,在注冊(cè)一次點(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寫(xiě)成別的名字,它還是固定類型,鼠標(biāo)事件
$("#aa").bind("點(diǎn)我",function(event,a,b){
alert("點(diǎn)我");
alert(a);
alert(b);
});
});
練習(xí):
寫(xiě)一個(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)文章
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)模擬購(gòu)物商城案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
本文主要講解javascript之迭代器，在 JavaScript 中，迭代器是一個(gè)對(duì)象，它定義一個(gè)序列，并在終止時(shí)可能返回一個(gè)返回值。需要詳細(xì)了解相關(guān)知識(shí)的小伙伴可以參考一下這篇文章2021-09-09
這篇文章主要介紹了JavaScript遞歸算法生成樹(shù)形菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
JS使用for in有序獲取對(duì)象數(shù)據(jù)
這篇文章主要介紹了JS使用for in有序獲取對(duì)象數(shù)據(jù),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
javascript showModalDialog 內(nèi)跳轉(zhuǎn)頁(yè)面的問(wèn)題
在頁(yè)面中使用了showModalDialog，但是在跳轉(zhuǎn)鏈接時(shí)，不會(huì)在當(dāng)前頁(yè)執(zhí)行，而是彈出一個(gè)新的頁(yè)面。2010-11-11
JavaScript基于擴(kuò)展String實(shí)現(xiàn)替換字符串中index處字符的方法
這篇文章主要介紹了JavaScript基于擴(kuò)展String實(shí)現(xiàn)替換字符串中index處字符的方法,涉及javascript使用substr方法針對(duì)字符串進(jìn)行替換操作的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-06-06
JS實(shí)現(xiàn)單例模式的多種方案 ，本文稍加總結(jié)，列出了6種方式與大家分享，大體上將內(nèi)容分為了ES5（Function）與ES6（Class）實(shí)現(xiàn)兩種部分，對(duì)js單例模式相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2022-09-09
js網(wǎng)頁(yè)中的(運(yùn)行代碼)功能實(shí)現(xiàn)思路
網(wǎng)頁(yè)中的"運(yùn)行代碼"是一個(gè)很方便的功能，可以直接看到代碼的效果，感興趣的朋友不妨參考下，或許對(duì)你學(xué)習(xí)js有所幫助，好了花不多說(shuō)切入正題2013-02-02
詳解ant-design-pro使用qiankun微服務(wù)
這篇文章主要介紹了ant-design-pro使用qiankun微服務(wù)詳解,其實(shí)微服務(wù)需要有主應(yīng)用和子應(yīng)用，?一個(gè)子應(yīng)用可以配置多個(gè)相關(guān)聯(lián)的主應(yīng)用,配置方法都是一樣的，對(duì)ant-design-pro微服務(wù)配置相關(guān)知識(shí)，感興趣的朋友一起看看吧2022-03-03
JS實(shí)現(xiàn)全屏預(yù)覽F11功能的示例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)全屏預(yù)覽F11功能的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07