JQuery事件
第一章:鼠標事件
1. .click( )
鼠標點擊事件
ele.click(function( ){
})
click事件其實是由mousedown于mouseup 2個動作構成，所以點擊的動作只有在松手后才觸發
例1:
<div id="test">點擊觸發<div>
$("#test").click(function() {
//this指向 div元素
});
2. .dbclick( )
鼠標雙擊事件,語法與.click( )相同
與click( ) 的區別,類似于由倆個click( )事件組成,中間間隔的時間由系統設定
3. .mousedown( )
監聽用戶鼠標按下的操作
例1:
<div id="test">點擊觸發<div>
$("#test").mousedown(function() {
//this指向 div元素
});
4. .mouseup( )
監聽用戶鼠標抬起時的操作
5. .mousemove( )
監聽用戶鼠標移動時的操作
6. .mouseover( )
監聽用戶鼠標移入時的操作(冒泡)
#綁定的元素觸發了mouseover事件后,它會一直向上找父級元素的mouseover事件,如果父級元素也有mouseover事件則會被觸發
7. .mouseout( )
監聽用戶鼠標移出時的操作(冒泡)
8. .mouseenter( )
監聽用戶鼠標移入時的操作(不冒泡)
# .mouseenter事件只會在綁定它的元素上被調用，而不會在后代節點上被觸發
9. .mouseleave( )
監聽用戶鼠標移出時的操作(不冒泡)
10. .hover( )
$(selector).hover(handlerIn, handlerOut)
在元素上移入移出,打到mouseenter 和 mouseleave 同時使用的效果
參數:
- handlerIn(eventObject)：當鼠標指針進入元素時觸發執行的事件函數
- handlerOut(eventObject)：當鼠標指針離開元素時觸發執行的事件函數
例1:
$("p").hover( // hover()方法是同時綁定 mouseenter和 mouseleave事件
function() {
$(this).css("background", 'red'); // 我們可以用它來簡單地應用在 鼠標在元素上行為
},
function() {
$(this).css("background", '#bbffaa');
}
);
第二章: 表單事件
1. .focusin( )
當一個元素，或者其內部任何一個元素獲得焦點的時候，比如input元素，用戶在點擊失去焦的時候，如果開發者需要捕獲這個動作
冒泡
方法一: $ele.focusin( handler )
? 參數: handler 回調函數
方法二: $ele.focusin( [eventData ], handler )
? 參數: eventData 數據參數 handler 回調函數
<div id="test">點擊觸發<div>
$("#test").focusin(function() {
//this指向 div元素
});
2. .focusout( )
當一個元素，或者其內部任何一個元素失去焦點的時候，比如input元素，用戶在點擊失去焦的時候，如果開發者需要捕獲這個動作
用法與focusin( ) 相同,冒泡
3. .focus( )
focusin( )的不冒泡版
4. .blur( )
focusout( )的不冒泡版
5. .change( )
<input>元素，<textarea>和<select>元素的值都是可以發生改變的，開發者可以通過change事件去監聽這些改變的動作
- <input> value( ) 元素發生改變時 ,失去焦點后發生
- <select> 當用戶鼠標做出選擇時,該事件立即觸發
- <textarea> 當輸入框中有發生改變時,失去焦點后發生
<select id = "target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
<div id = "result"></div>
$('#target').change(function(e){ //當選項框發生改變時,在div中輸出被選中的選項的值
$('#result').html(e.target.value);
})
=> Option 2
6. .select( )
當 textarea 或文本類型的 input 元素中的文本被選擇時，會發生 select 事件。
$ele.select(eventDate,handler(eventObject));
參數: eventDate 數據參數 handler(eventObject) 回調函數
//監聽input元素中value的選中
//觸發元素的select事件
$("input").select(function(e){
alert(e.target.value)
})
7. .submit( )
監聽提交表單事件
$ele.submit( [eventData ], handler(eventObject) )
具體能觸發submit事件的行為：
- <input type="submit">
- <input type="image">
- <button type="submit">
- 當某些表單元素獲取焦點時，敲擊Enter（回車鍵）
阻止默認行為:
傳統的方式是調用事件對象 e.preventDefault() 來處理，
jQuery中可以直接在函數中最后結尾return false即可
例:
$("#target").submit(function(data) {
return false; //阻止默認行為，提交表單
});
第三章: 鍵盤事件
1. .keydown( )
當用戶在一個元素上第一次按下鍵盤上字母鍵的時候，就會觸發它
//直接綁定事件
$elem.keydown( handler(eventObject) )
//傳遞參數
$elem.keydown( [eventData ], handler(eventObject) )
//手動觸發已綁定的事件
$elem.keydown()
2. .keyup( )
當用戶在一個元素上第一次松手鍵盤上的鍵的時候，就會觸發它。
使用方法與keydown是一致的只是觸發的條件是方法的
3. keypess( )
當瀏覽器捕獲鍵盤輸入時,觸發它
//監聽鍵盤按鍵
//獲取輸入的值
$('.target1').keypress(function(e) {
$("em").text(e.target.value)
});
注:KeyPress主要用來接收字母、數字等ANSI字符，而 KeyDown 和 KeyUP 事件過程可以處理任何不被 KeyPress 識別的擊鍵。諸如：功能鍵（F1-F12）、編輯鍵、定位鍵以及任何這些鍵和鍵盤換檔鍵的組合等。
第四章: 事件的綁定與解綁
1. .on( )
給元素綁定事件
基本用法：.on( events ,[ selector ] ,[ data ] )
$("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式
多個事件綁定同一函數
$("#elem").on("mouseover mouseout",function(){ });
多個事件綁定不同函數
$("#elem").on({
mouseover:function(){},
mouseout:function(){}
});
2. .off( )
卸載事件
綁定2個事件
$("elem").on("mousedown mouseup",fn)
刪除一個事件
$("elem").off("mousedown")
刪除所有事件
$("elem").off("mousedown mouseup")
快捷方式刪除所有事件，這里不需要傳遞事件名了，節點上綁定的所有事件講全部銷毀
$("elem").off()
3. event.type
獲取事件的類型
$("a").click(function(event) {
alert(event.type); // "click"事件
});
4. event.preventDefault( )
阻止默認行為
$("#content").click(function(event) {
$("#msg").html($("#msg").html() + "<p>外層div元素被單擊</p>");
event.stopPropagation(); //阻止事件冒泡
});
5. event.currentTarget
在事件冒泡過程中的當前DOM元素
冒泡前的當前觸發事件的DOM對象, 等同于this.
