JavaScript加強之自訂event事件_javascript技巧

複製程式碼 程式碼如下:

$().ready(function(){
for( var i=0;i/**
* 這種寫法不專業,如果處於循環裡,就會註冊5次事件,點擊後alert5次
*/
// $("#aa").click(function(){
// alert(" hahahaha");
// });
/**
* 這種寫法才是專業的,在註冊一次點擊事件前,先解綁定點擊事件,然後再綁定一個點擊事件,所以到最後只綁定了一次點擊事件
*/
$("#aa").unbind("click");
$("#aa" ).bind("click",function(){
alert("oooooo");
});
}
});

自訂事件:

複製程式碼 程式碼如下:

$().ready(function(>

$()。 🎜>/**
* 自訂事件,在click的時候進行觸發
*/
$("#aa").bind("click",function(){
//事件觸發器,觸發自訂的event
$( this).trigger("點我");
});
//自訂一個"點我"事件
$("#aa").unbind("點我");
$("#aa").bind("點我",function(){
alert("點我");
});
});

傳遞參數的自訂事件:

複製程式碼

程式碼如下:

程式碼如下:


$ ).ready(function(){
/**
* 自訂事件,在click的時候進行觸發
*/
$("#aa").bind("click",function(){
//事件觸發器,觸發自訂的event,傳遞實參
$(this).trigger("點我",['張三','李四']);
});
//自訂一個"點我"事件
$("#aa").unbind("點我");
//第一個參數是固定的,後面都是自訂,就算把event寫成別的名字,它還是固定類型,滑鼠事件
$("#aa").bind("點我",function(event,a,b){
alert("點我");

alert (a);
alert(b);
});
});


練習:

寫一個自訂事件,把該事件綁定在一個下拉列錶框中

當下拉列錶框選中一項的時候,觸發該事件,以參數的形式把選中的值傳遞到自訂事件中,並輸出。 html:

複製程式碼


程式碼如下:

程式碼如下:

111 222 333 option>

js:

複製代碼


代碼如下:


$().ready(function(){
$("option").unbind("click");
$("option").bind("click" ,function(){
$(this).trigger("選擇並顯示",[$(this).val()]);

}); $("option" ).unbind("選擇並顯示"); $("option").bind("選擇並顯示",function(event,value){ alert(value); }); });