jquery事件之事件

事件名	說明	語法 （events 事件類型，data數據，handler 事件處理函數，selector 選擇器）
blur()	得到失去鼠標光標焦點事件	jQueryObject.blur( [ [ data ,]  handler ] )
change()	在文本內容或選項被更改時觸發。該事件僅適用於<input type="text">和<textarea>以及<select>	jQueryObject.change( [ [ data ,]  handler ] )
click（）	事件就是鼠標按鈕單擊事件	jQueryObject.click( [ [ data ,]  handler ] )
dblclick（）	鼠標左鍵雙擊事件。	jQueryObject.dblclick( [ [ data ,]  handler ] )
error()	在js發生錯誤或資源加載失敗時觸發。該事件主要用於window對象、<img>等元素。	jQueryObject.error( [ data ,]  handler )
focus（）	得到鼠標光標焦點事件，（與blur()相反）	jQueryObject.focus( [ [ data ,]  handler ] )
focusin（）	得到焦點事件。與focus事件不一樣的是：focusin能夠檢測該元素的後代元素得到焦點的狀況	jQueryObject.focusin( [ [ data ,]  handler ] )
focusout（）	失去焦點事件。與blur事件不一樣的是：focusout能夠檢測該元素的後代元素得到焦點的狀況	jQueryObject.focusout( [ [ data ,]  handler ] )
keydown（）	會在按下鍵盤按鍵時觸發。它與keypress事件相似，但keypress着重的是按下該鍵輸入了哪一個字符，按下任何鍵均可觸發keydown)。	jQueryObject.keydown( [[ data ,]  handler ] )
keypress（）	按下鍵盤按鍵時觸發。它與keydown事件相似，但keypress着重的是按下該鍵輸入了哪一個字符	jQueryObject.keypress( [[ data ,]  handler ] )
keyup（）	按下鍵盤按鍵並釋放時觸發	jQueryObject.keyup( [[ data ,]  handler ] )
mousedown（）	在鼠標按鈕被按下時觸發。（無需釋放）	jQueryObject.mousedown( [[ data ,]  handler ] )
mouseup（）	在鼠標按鈕被釋放時觸發。	jQueryObject.mouseup( [ [ data ,]  handler ] )
mouseenter（）	在鼠標進入某個元素時觸發。只會在鼠標進入當前元素時觸發	jQueryObject.mouseenter( [[ data ,]  handler ] )
mouseleave（）	在鼠標離開某個元素時觸發，只會在鼠標離開當前元素時觸發	jQueryObject.mouseleave( [[ data ,]  handler ] )
mouseover（）	在鼠標進入某個元素時觸發，鼠標進入當前元素及其任何後代元素時觸發	jQueryObject.mouseover( [[ data ,]  handler ] )
mouseout（）	鼠標離開某個元素時觸發，鼠標離開當前元素及其任何後代元素時觸發	jQueryObject.mouseout( [[ data ,]  handler ] )
load（）	在資源加載完成時觸發。從1.8開始被標記爲已過期	jQueryObject.load( [[ data ,]  handler ] )
resize（）	會在元素的尺寸大小被調整時觸發。該事件經常使用於window對象(瀏覽器窗口)或框架頁面。	jQueryObject.resize( [ [ data ,]  handler ] )
scroll（）	在元素的滾動條位置發生改變時觸發。該事件通常僅適用於window對象或其餘可滾動元素(通常會出現滾動條)。	jQueryObject.scroll( [ [ data ,]  handler ] )
select（）	在文本框中的文本內容被選中時觸發。該事件僅適用於<input type="text">和<textarea>文本框	jQueryObject.select( [ [ data ,]  handler ] )
submit（）	事件會在表單被提交時觸發。該事件僅適用於<form>元素。	jQueryObject.submit( [ [ data ,]  handler ] )

1.blur()事件就是得到失去鼠標光標焦點事件。
$("#txt1").blur(function(){
$(this).css("border"," 1px solid red");
});
判斷文本框驗證：
var data={"name":"eric","sex":"man"};
$("#t1").blur(data,function(event){
var map=event.data;
var tips="";
if(!$(this).val()){
$(this).next(".tips").html("").append("<b style='color:red;'>請輸入"+map.name+"</b>");
return false;
}
if($(this).val!="eric"){
$(this).next(".tips").html("").append("<b style='color:red;'>輸入有誤,名字不是"+map.name+"</b >");
return false;
}
});
2.change()函數用於爲每一個匹配元素的change事件綁定處理函數。change事件會在文本內容或選項被更改時觸發。該事件僅適用於<input type="text">和<textarea>以及<select>。對於text和textarea元素，該事件會在元素失去焦點時發生(文本內容也發生了更改)。
文本框值發生變化就記錄時間並判斷輸入的值是否已經存在：
var data={"name":"eric","sex":"man"};
function changeHandle(event){
var map=event.data;
$("#log").append(new Date().toLocaleString()+","+map.name+" 發生了改變<br>");
if($("#txt1").val()==map.name){
$("#log").append(new Date().toLocaleString()+","+map.name+" 已經存在 <br>");
}
}
$("#txt1").change(data,changeHandle);
3.click事件就是鼠標按鈕單擊事件。
4.dblclick事件就是鼠標左鍵雙擊事件。
var data={"name":"eric","sex":"man"};
$("#btn").dblclick(data,function(event){
alert(event.data.name);
});
5.error()函數用於爲每一個匹配元素的error事件綁定處理函數。會在js發生錯誤或資源加載失敗時觸發。該事件主要用於window對象、<img>等元素。刪除經過error()綁定的事件，使用unbind()函數。
$("img").error( function(){
alert( "圖片加載失敗!" );
} );
// 圖片加載失敗時，從新加載新的圖片URL
var newImageURL = "http://www.365mini.com/static/image/backTop.png";
$("img").error( newImageURL, function(event){
this.src = event.data;
} );
6.focus事件就是得到鼠標光標焦點事件，要刪除經過focus()綁定的事件，請使用unbind()函數。（與blur()相反）
$("#t2").focus(function(event){
$(this).css("border","1px solid red");
});
// 爲全部text元素的focus事件綁定處理函數
var inputMap = { "name": "姓名", "age": "年齡" };
$(":text").focus( inputMap, function(event){
var map = event.data;
$(this).next(".tips").html( '請輸入[' + map[this.name] + ']' );
} );
7.focusin事件就是得到焦點事件。與focus事件不一樣的是：focusin能夠檢測該元素的後代元素得到焦點的狀況(換句話說，focusin事件支持冒泡)。
8.focusout事件就是失去焦點事件。與blur事件不一樣的是：focusout能夠檢測該元素的後代元素得到焦點的狀況(換句話說，focusout事件支持冒泡，blur不支持)。
9.keydown事件會在按下鍵盤按鍵時觸發。它與keypress事件相似，但keypress着重的是按下該鍵輸入了哪一個字符(只有可以打印字符的鍵纔會觸發keypress)，keydown着重的是按下了哪一個鍵(按下任何鍵均可觸發keydown)。刪除經過keydown()綁定的事件，使用unbind()函數。
$("#t2").keydown(function(event){
$(this).css("border","1px solid red");
});
// 只容許按下的字母鍵生效 (使用某些輸入法可能會繞過該限制)
var validKeys = { start: 65, end: 90 };
$("#keys").keydown( validKeys, function(event){
var keys = event.data;
return event.which >= keys.start && event.which <= keys.end;
} );
10.keypress事件會在按下鍵盤按鍵時觸發。它與keydown事件相似，但keypress着重的是按下該鍵輸入了哪一個字符(只有可以打印字符的鍵纔會觸發keypress)，keydown着重的是按下了哪一個鍵(按下任何鍵均可觸發keydown)。
11.keyup事件會在按下鍵盤按鍵並釋放時觸發。例如：你一直按住A鍵，直到10秒鐘後才釋放，只會在釋放按鍵的時候觸發一次keyup事件。但在這個過程當中會觸發許屢次keydown事件(或keypress事件)。所以，keyup事件沒法阻止字符的輸入。
$("#t2").keyup(function(event){
$(this).css("border","1px solid red");
});
12.mousedown事件會在鼠標按鈕被按下時觸發。mouseup事件會在按下鼠標按鈕並釋放時觸發。注意：若是一直按住鼠標按鈕不放，也只會觸發一次mousedown事件。
$("#t2").mousedown(function(event){
$(this).css("border","1px solid red");
});
13.mouseup事件會在鼠標按鈕被釋放時觸發。mousedown事件會在鼠標按鈕被按下(無需釋放)時觸發。
$("#t2").mouseup(function(event){
$(this).css("border","1px solid red");
});
14.mouseenter事件會在鼠標進入某個元素時觸發。它與mouseover事件類似，但mouseenter事件只會在鼠標進入當前元素時觸發，而mouseover事件會在鼠標進入當前元素及其任何後代元素時觸發(換句話說，mouseover事件支持冒泡)。
$("#t2").mouseenter(function(event){
$(this).css("border","1px solid red");
});
15.mouseleave事件會在鼠標離開某個元素時觸發。它與mouseout事件類似，但mouseleave事件只會在鼠標離開當前元素時觸發，而mouseout事件會在鼠標離開當前元素及其任何後代元素時觸發(換句話說，mouseout事件支持冒泡)。
$("#t2").mouseleave(function(event){
$(this).css("border","1px solid red");
});
16.mouseover事件會在鼠標進入某個元素時觸發。它與mouseenter事件類似，但mouseenter事件只會在鼠標進入當前元素時觸發，而mouseover事件會在鼠標進入當前元素及其任何後代元素時觸發(換句話說，mouseover事件支持冒泡)。
17.mouseout事件會在鼠標離開某個元素時觸發。它與mouseleave事件類似，但mouseleave事件只會在鼠標離開當前元素時觸發，而mouseout事件會在鼠標離開當前元素及其任何後代元素時觸發(換句話說，mouseout事件支持冒泡)。
18.load事件會在資源加載完成時觸發。該事件主要用於window對象、document對象、<body>、<script>、<link>、<img>、<iframe>、<frameset>、<frame>等元素。jQuery 1.0 新增該函數，但從1.8開始被標記爲已過期。
19.unload事件會在頁面退出時觸發。該事件主要用於window對象、<body>、<frameset>元素。從1.8開始被標記爲已過期。
20.resize事件會在元素的尺寸大小被調整時觸發。該事件經常使用於window對象(瀏覽器窗口)或框架頁面。
var minSize = { width: 800, height: 600 };
$(window).resize( minSize, function(event){
var min = event.data;
var $dom = $(this);
if( $dom.width() < min.width ){
$("body").append("<br>窗口寬度不要小於" + min.width );
}else if( $dom.height() < min.height ){
$("body").append("<br>窗口高度不要小於" + min.height);
}
} );
21.scroll事件會在元素的滾動條位置發生改變時觸發。該事件通常僅適用於window對象或其餘可滾動元素(通常會出現滾動條)。
// 向下滾動到據頂部超過1000px時，回到頂部：
var maxScrollTop = 1000;
$(window).scroll( maxScrollTop, function(event){
var $me = $(this);
if( $me.scrollTop() > event.data ){
$me.scrollTop( 0 );
}
} );
22.select事件會在文本框中的文本內容被選中時觸發。該事件僅適用於<input type="text">和<textarea>文本框。
// 爲全部text元素的select事件綁定處理函數
var user = { name: 'CodePlayer', age: 18 };
$(":text").select( user, function(event){
$("#msg").html( event.data.name + "，你選擇了[" + this.name + "]中的一些文本內容!" ).show().fadeOut( 2000 );
} );
23.submit事件會在表單被提交時觸發。該事件僅適用於<form>元素。
// 觸發form元素的submit事件
// $("form").submit( );
還能夠爲事件處理函數傳遞一些附加的數據:
var map = { name: "姓名", age: "年齡" };
$("form").submit( map, function(event){
var labelMap = event.data;
var label = '';

// 循環驗證全部text元素是否爲空
$(this).find(":text").each(function(){
if( !this.value ){
label = labelMap[this.name];
return false;
}
});

if( label ){
alert( label + "不能爲空!" );
return false;
}
} );

html頁面：

<body> <form> <div id="n1"> <p id="n2"><span>CodePlayer</span></p> <p id="n3"><span>qinqin</span></p> <em id="n4">http://www.365mini.com</em> </div> <p>id="n5">Google</p><input id="btn1" type="button" value="點擊1" /><input id="btn2" type="button" value="點擊2" /><a id="a1" href="#">CodePlayer</a> <input id="btn" type="button" value="點擊綁定一次" /> <div id="n2"> <p id="n6"><span>CodePlayer</span></p> <p id="n7"><span>qinqin</span></p> <input id="txt1" type="text"/> </div><div id="log"><div> <input id="t1" name="name" type="text" /><span class="tips"></span> <br> <input id="t2" name="age" type="text" /><span class="tips"></span> <img src="http://www.365mini.com/static/image/invalid.png" alt="回到頂部" /> </form></body>