JQuery事件

第一章:鼠標(biāo)事件

1. .click( )

鼠標(biāo)點(diǎn)擊事件

ele.click(function( ){

})

click事件其實(shí)是由mousedown于mouseup 2個(gè)動(dòng)作構(gòu)成夹厌，所以點(diǎn)擊的動(dòng)作只有在松手后才觸發(fā)

例1:
<div id="test">點(diǎn)擊觸發(fā)<div>
$("#test").click(function() {
    //this指向 div元素
});

2. .dbclick( )

鼠標(biāo)雙擊事件,語(yǔ)法與.click( )相同

與click( ) 的區(qū)別,類似于由倆個(gè)click( )事件組成,中間間隔的時(shí)間由系統(tǒng)設(shè)定

3. .mousedown( )

監(jiān)聽用戶鼠標(biāo)按下的操作

例1:
<div id="test">點(diǎn)擊觸發(fā)<div>
$("#test").mousedown(function() {
    //this指向 div元素
});

4. .mouseup( )

監(jiān)聽用戶鼠標(biāo)抬起時(shí)的操作

5. .mousemove( )

監(jiān)聽用戶鼠標(biāo)移動(dòng)時(shí)的操作

6. .mouseover( )

監(jiān)聽用戶鼠標(biāo)移入時(shí)的操作(冒泡)

#綁定的元素觸發(fā)了mouseover事件后,它會(huì)一直向上找父級(jí)元素的mouseover事件,如果父級(jí)元素也有mouseover事件則會(huì)被觸發(fā)

7. .mouseout( )

監(jiān)聽用戶鼠標(biāo)移出時(shí)的操作(冒泡)

8. .mouseenter( )

監(jiān)聽用戶鼠標(biāo)移入時(shí)的操作(不冒泡)

#   .mouseenter事件只會(huì)在綁定它的元素上被調(diào)用贝乎，而不會(huì)在后代節(jié)點(diǎn)上被觸發(fā)

9. .mouseleave( )

監(jiān)聽用戶鼠標(biāo)移出時(shí)的操作(不冒泡)

10. .hover( )

$(selector).hover(handlerIn, handlerOut)

在元素上移入移出,打到mouseenter 和 mouseleave 同時(shí)使用的效果

參數(shù):

• handlerIn(eventObject)：當(dāng)鼠標(biāo)指針進(jìn)入元素時(shí)觸發(fā)執(zhí)行的事件函數(shù)
• handlerOut(eventObject)：當(dāng)鼠標(biāo)指針離開元素時(shí)觸發(fā)執(zhí)行的事件函數(shù)

例1:                 
$("p").hover(                                                   // hover()方法是同時(shí)綁定 mouseenter和 mouseleave事件
        function() {
            $(this).css("background", 'red');                   // 我們可以用它來簡(jiǎn)單地應(yīng)用在 鼠標(biāo)在元素上行為
        },
        function() {
            $(this).css("background", '#bbffaa');
        }
    );

第二章: 表單事件

1. .focusin( )

當(dāng)一個(gè)元素彪标，或者其內(nèi)部任何一個(gè)元素獲得焦點(diǎn)的時(shí)候，比如input元素，用戶在點(diǎn)擊失去焦的時(shí)候笛辟，如果開發(fā)者需要捕獲這個(gè)動(dòng)作

冒泡

方法一: $ele.focusin( handler )

? 參數(shù): handler 回調(diào)函數(shù)

方法二: $ele.focusin( [eventData ], handler )

? 參數(shù): eventData 數(shù)據(jù)參數(shù) handler 回調(diào)函數(shù)

<div id="test">點(diǎn)擊觸發(fā)<div>
$("#test").focusin(function() {
    //this指向 div元素
});

2. .focusout( )

當(dāng)一個(gè)元素，或者其內(nèi)部任何一個(gè)元素失去焦點(diǎn)的時(shí)候逞盆，比如input元素券勺，用戶在點(diǎn)擊失去焦的時(shí)候绪钥，如果開發(fā)者需要捕獲這個(gè)動(dòng)作

用法與focusin( ) 相同,冒泡

3. .focus( )

focusin( )的不冒泡版

4. .blur( )

focusout( )的不冒泡版

5. .change( )

<input>元素，<textarea>和<select>元素的值都是可以發(fā)生改變的朱灿，開發(fā)者可以通過change事件去監(jiān)聽這些改變的動(dòng)作

• <input> value( ) 元素發(fā)生改變時(shí) ,失去焦點(diǎn)后發(fā)生
• <select> 當(dāng)用戶鼠標(biāo)做出選擇時(shí),該事件立即觸發(fā)
• <textarea> 當(dāng)輸入框中有發(fā)生改變時(shí),失去焦點(diǎn)后發(fā)生

<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){                                //當(dāng)選項(xiàng)框發(fā)生改變時(shí),在div中輸出被選中的選項(xiàng)的值
  $('#result').html(e.target.value);
})

=>  Option 2

6. .select( )

當(dāng) textarea 或文本類型的 input 元素中的文本被選擇時(shí)昧识，會(huì)發(fā)生 select 事件。

$ele.select(eventDate,handler(eventObject));

參數(shù): eventDate 數(shù)據(jù)參數(shù) handler(eventObject) 回調(diào)函數(shù)

    //監(jiān)聽input元素中value的選中
    //觸發(fā)元素的select事件
    $("input").select(function(e){
        alert(e.target.value)
    })

7. .submit( )

監(jiān)聽提交表單事件

$ele.submit( [eventData ], handler(eventObject) )

具體能觸發(fā)submit事件的行為：

• <input type="submit">
• <input type="image">
• <button type="submit">
• 當(dāng)某些表單元素獲取焦點(diǎn)時(shí)盗扒，敲擊Enter（回車鍵）

阻止默認(rèn)行為:

傳統(tǒng)的方式是調(diào)用事件對(duì)象  e.preventDefault() 來處理跪楞， 
jQuery中可以直接在函數(shù)中最后結(jié)尾return false即可
例:
$("#target").submit(function(data) { 
   return false; //阻止默認(rèn)行為，提交表單
});

第三章: 鍵盤事件

1. .keydown( )

當(dāng)用戶在一個(gè)元素上第一次按下鍵盤上字母鍵的時(shí)候侣灶，就會(huì)觸發(fā)它

//直接綁定事件
$elem.keydown( handler(eventObject) )
//傳遞參數(shù)
$elem.keydown( [eventData ], handler(eventObject) )
//手動(dòng)觸發(fā)已綁定的事件
$elem.keydown()

2. .keyup( )

當(dāng)用戶在一個(gè)元素上第一次松手鍵盤上的鍵的時(shí)候甸祭，就會(huì)觸發(fā)它。

使用方法與keydown是一致的只是觸發(fā)的條件是方法的

3. keypess( )

當(dāng)瀏覽器捕獲鍵盤輸入時(shí),觸發(fā)它

//監(jiān)聽鍵盤按鍵
    //獲取輸入的值
    $('.target1').keypress(function(e) {
        $("em").text(e.target.value)
    });

注:KeyPress主要用來接收字母褥影、數(shù)字等ANSI字符池户，而 KeyDown 和 KeyUP 事件過程可以處理任何不被 KeyPress 識(shí)別的擊鍵。諸如：功能鍵（F1-F12）凡怎、編輯鍵校焦、定位鍵以及任何這些鍵和鍵盤換檔鍵的組合等。

第四章: 事件的綁定與解綁

1. .on( )

給元素綁定事件

基本用法：.on( events ,[ selector ] ,[ data ] )

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

多個(gè)事件綁定同一函數(shù)

 $("#elem").on("mouseover mouseout",function(){ });

多個(gè)事件綁定不同函數(shù)

$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){}
});

2. .off( )

卸載事件

綁定2個(gè)事件

$("elem").on("mousedown mouseup",fn)

刪除一個(gè)事件

$("elem").off("mousedown")

刪除所有事件

$("elem").off("mousedown mouseup")

快捷方式刪除所有事件统倒，這里不需要傳遞事件名了寨典，節(jié)點(diǎn)上綁定的所有事件講全部銷毀

$("elem").off()

3. event.type

獲取事件的類型

$("a").click(function(event) {
  alert(event.type); // "click"事件
});

4. event.preventDefault( )

阻止默認(rèn)行為

$("#content").click(function(event) {
        $("#msg").html($("#msg").html() + "<p>外層div元素被單擊</p>");
        event.stopPropagation(); //阻止事件冒泡  
    });

5. event.currentTarget

在事件冒泡過程中的當(dāng)前DOM元素

冒泡前的當(dāng)前觸發(fā)事件的DOM對(duì)象, 等同于this.