jQuery之事件

阿新 • • 發佈：2018-12-19

在互動操作中,最簡單直接的操作就是點選操作.

點選事件

click方法,用於監聽使用者單擊操作
dbclick方法,用於監聽使用者雙擊操作

兩種點選事件相似,就來以click方法為例

方法一：$ele.click()

繫結$ele元素，不帶任何引數一般是用來指定觸發一個事件

$("ele").click(function(){
    alert("觸發指定事件");
})
$("#test").click(function(){
    $("ele").clik()
})

方式二：$ele.click(handler(eventObject))

繫結$ele元素，每次$ele元素觸發點選操作會執行回撥handler函式，這樣可以針對事件的反饋做很多操作,方法中的this是指向; 繫結事件的元素

<div id="test">點選觸發</div>
<script>
$("#test").click(function(){
    //this指向div元素
})
</script>

方式三：$ele.click([eventData],handler(eventObject))

使用和方式二一致,不過可接受以資料引數，這樣處理為解決不同作用域下資料傳遞的問題

<div id="test">點選觸發</div>
<script>
$("#test").click(1111,function(e){
    //this指向div元素
    //e.data => 1111 傳遞資料
})
</script>

dbclick()和click()用法類似，但仍與一些區別: click事件觸發需要一些因素:

click事件其實是由mousedown和mouseuo這兩個動作構成,所以點選的動作在鬆手後才會觸發

dbclick事件觸發需要一些因素:

滑鼠指標在元素裡面點選
滑鼠指標在元素裡面釋放
滑鼠指標在元素裡面再次點選,點選間隔時間,是系統而定
滑鼠指標在元素裡面時再次釋放

需要注意的是,

在同一元素上同時繫結click和dbclick事件是不可取的

mousedown和mouseup事件

mousedown,監聽使用者滑鼠按下的操作
mouseup,監聽使用者滑鼠彈起的操作

和點選事件相似. mousedown事件觸發需要注意的因素

mousedown強調是按下觸發
如果在一個元素上按住了滑鼠不放,並且拖動滑鼠離開這個元素後再鬆開滑鼠鍵,仍然屬於mousedown事件
任何滑鼠按鈕被按下時都能觸發mousedown事件
用event物件的which區別按鍵,敲擊滑鼠左鍵which的值是1,敲擊滑鼠中鍵which的值是2,敲擊滑鼠右鍵which的值是3

mouseup事件觸發需要注意的因素:

mouseup強調是鬆手觸發,與mousedown是相反的
mouseup和mousedown結合起來就是click事件
如果使用者在一個元素上按下滑鼠按鍵,並且拖動滑鼠離開這個元素再釋放,仍然屬於mouseup事件
任何滑鼠按鈕鬆手時都能觸發mouseup事件
用event物件的which區別按鍵,敲擊滑鼠左鍵which的值是1,敲擊滑鼠中鍵which的值是2,敲擊滑鼠右鍵which的值是3

mousemove事件

移動事件,監聽使用者移動的操作.

mousemove事件觸發的一些因素:
mousemove事件是當滑鼠指標移動時觸發的，即使是一個畫素

如果處理器做任何重大的處理，或者如果該事件存在多個處理函式，這可能造成瀏覽器的嚴重的效能問題

mouseover和mouseout事件

移入移出事件

mouseenter和mouseleave事件

監聽使用者移動到元素內部或外部的操作

mouseenter事件和mouseover的區別:關鍵點是對於冒泡的方式處理問題 譬如,

<div id="div">
    <p>這是個測試</p>
</div>

如果在p元素和div元素上都繫結mouseover事件,在滑鼠離開p元素還沒有離開div元素時,觸發的結果是p元素響應事件,div元素也相應事件

這是因為事件冒泡的緣故,p元素觸發了mouseover,它會一直往上找父元素上的mouseover事件觸發(當然是該父元素存在mouseover事件)。

因此,在這種情況中，jQuery推薦我們使用 mouseenter事件。mouseenter事件只會在繫結它的元素上被呼叫，而不會在後代節點上被觸發

hover事件

可以實現切換的效果只需要在hover方法中傳遞2個回撥函式就可以了，不需要顯示的繫結2個事件

$(selector).hover(handlerIn, handlerOut)

其中:

handlerIn(eventObject)：當滑鼠指標進入元素時觸發執行的事件函式
handlerOut(eventObject)：當滑鼠指標離開元素時觸發執行的事件函式

focusin事件

當一個元素,或者在其內部任何一個元素獲得焦點的時候,譬如input元素,使用者在點選聚焦的時候,開發者想要捕獲這個動作話,可以使用focusing事件

focusout事件

當一個元素，或者其內部任何一個元素失去焦點的時候，比如input元素，使用者在點選失去焦的時候，如果開發者需要捕獲這個動作，jQuery提供了一個focusout事件

對於處理表單的事件有以上提到的處理焦點事件focusin和focusout，還有同樣處理焦點的事件blur和focus事件

它們之間的本質區別：是否支援冒泡處理譬如:

<div>
    <input type="text">
</div>

假設其中input元素可以觸發focus()事件 div是input的父元素，當它包含的元素input觸發了focus事件時，這個div就產生了focusin()事件focus()在元素本身產生，focusin()在元素包含的元素中產生

change事件

<input>元素，<textarea>和<select>元素的值都是可以發生改變的,開發者可以通過change事件去監聽這些改變的動作

input元素,監聽value值的變化,但有改變時,失去焦點時後觸發change事件,對於單選按鈕或複選框,當用戶用滑鼠作出改變時,該事件立即觸發
select元素,當用戶用滑鼠作出選擇時,該事件立即觸發
textarea元素,當有改變時,失去焦點後觸發change事件

select事件

當 textarea 或文字型別的 input 元素中的文字被選擇時，會發生 select 事件。這個函式會呼叫執行繫結到select事件的所有函式，包括瀏覽器的預設行為。可以通過在某個繫結的函式中返回false來防止觸發瀏覽器的預設行為。select事件只能用於<input>元素與<textarea>元素

<input type="text" value="imooc">
<textarea name="info" id="" cols="30" rows="10"></textarea>
<script>
    $("input").select(function(e){
        alert(e.target.type);
    });
    $("textarea").select(function(){
        alert("文字被選中")
    })
</script>

submit事件

提交表單是一個最常見的業務需求，比如使用者註冊，一些資訊的輸入都是需要表單的提交。同樣的有時候開發者需要在表單提交的時候過濾一些的資料、做一些必要的操作例如：驗證表單輸入的正確性，如果錯誤就阻止提交，需重新輸入，此時可以通過submit事件，監聽下提交表單的這個動作。

通過在<form>元素上繫結submit事件，開發者可以監聽到使用者提交表單的行為具體能觸發submit事件的行為:

<input type="submit">
<input type="image">
<button type="submit">
當某些表單元素獲取焦點時,敲擊Enter鍵

需要特別注意： form元素是有預設提交表單的行為，如果通過submit處理的話，需要禁止瀏覽器的這個預設行為傳統的方式是呼叫事件物件 e.preventDefault() 來處理， jQuery中可以直接在函式中最後結尾return false即可 jQuery處理如下：

$("#target").submit(function(data) { 
   return false; //阻止預設行為，提交表單
});

鍵盤事件，將使用者行為分解成2個動作，鍵盤按下與鬆手.

keydown事件

當用戶在一個元素上第一次按下鍵盤上字母鍵的時候，就會觸發它。

keyup事件

當用戶在一個元素上第一次鬆手鍵盤上的鍵的時候，就會觸發它。注意：

keydown是在鍵盤按下就會觸發，keyup是在鍵盤松手就會觸發。理論上它可以繫結到任何元素，但keydown/keyup事件只是傳送到具有焦點的元素上，不同的瀏覽器中，可獲得焦點的元素略有不同，但是表單元素總是能獲取焦點，所以對於此事件型別表單元素是最合適的。

keydown事件觸發在文字還沒敲進文字框，這時如果在keydown事件中輸出文字框中的文字，得到的是觸發鍵盤事件前的文字，而keyup事件觸發時整個鍵盤事件的操作已經完成，獲得的是觸發鍵盤事件後的文字。

keypress事件

也是捕獲鍵盤輸入的

keypress事件與keydown和keyup的主要區別

只能捕獲單個字元，不能捕獲組合鍵
無法響應系統功能鍵（如delete，backspace）
不區分小鍵盤和主鍵盤的數字字元

總而言之，

KeyPress主要用來接收字母、數字等ANSI字元，
而 KeyDown 和 KeyUP 事件過程可以處理任何不被 KeyPress 識別的擊鍵。
諸如：功能鍵（F1-F12）、編輯鍵、定位鍵以及任何這些鍵和鍵盤換檔鍵的組合等。

on()的多事件繫結

之前學的滑鼠事件，表單事件與鍵盤事件都有個特點，就是直接給元素繫結一個處理函式，所有這類事件都是屬於快捷處理。翻開原始碼其實可以看到，所有的快捷事件在底層的處理都是通過一個"on"方法來實現的。jQuery on()方法是官方推薦的繫結事件的一個方法。

譬如,以點選事件為例看一下on和click的不同寫法

$("p").click(function(){})
$("p").on("click",function(){})

這最大的不同就on可以自定義事件名

多事件繫結同一個函式

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

通過空格分離,傳遞不同的事件名,可以繫結多個事件.

多事件繫結不同函式

$("p").on(
    mouseover:function(){},
    mouseout:function(){}
)

通過空格分離，傳遞不同的事件名，可以同時繫結多個事件，每一個事件執行自己的回撥方法

譬如，將資料傳遞到處理程式

<input type="button" value="按鈕">
<script>
    function say(event){
        alert("Hello "+event.data.name);
    }
    $("input").on("click",{
        name:"imooc"
    },say);
</script>

可以通過第二引數（物件），當一個事件被觸發時，要傳遞給事件處理函式的

on的委託機制

.on(event,[selector],[data],handler(eventObject))

舉個栗子：

<div>
    <p>
        <a href="#">這就是個測試</a>
    </p>
</div>
<script>
$("div").on("click","a",function(){
    alert("test");
})
</script>

事件繫結在最上層div元素上，當用戶觸發在a元素上，事件將往上冒泡，一直會冒泡在div元素上。如果提供了第二引數，那麼事件在往上冒泡的過程中遇到了選擇器匹配的元素，將會觸發事件回撥函式。也就說遇到了第二個引數的 “a” 就不再往上冒泡泡了。

解除安裝事件off()方法

通過.on()繫結的事件處理程式
通過off()方法移除該繫結

當有多個過濾引數時，只有與這些引數完全匹配的事件處理函式才會被移除

舉個栗子：

繫結2個事件

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

如果要刪除其中一個事件

$("p").off("mousedown")

若要刪除所有事件

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

刪除所有事件還有個快捷方式，不需要傳遞事件名了，節點上繫結的所有事件講全部銷燬

$("p").off()

trigger事件

mousedown、click、keydown等這型別事件都是瀏覽器提供的，也稱之為原生事件。這型別事件是需要有互動行為才能夠被觸發。可通過on方法繫結一個原生事件

$("element").on("click",function(){
    alert("觸發系統事件")
})

如上，alert的執行必須要有使用者點選才可以，如果不同使用者互動是否能在某一個時刻自動觸發該事件呢？ jQuery中提供trigger方法來觸發瀏覽器事件。

$("element").trigger("click");

在繫結on的事件元素上，通過trigger方法就可以呼叫到alert了。

講了半天的trigger事件,那這個trigger到底是什麼呢?

trigger事件就是根據繫結到匹配元素的給定事件型別執行所有的處理程式和行為

trigger除了能夠觸發瀏覽器事件,同時還支援自定義事件,並且自定義時間還支援傳遞引數

$("element").on("")

trigger觸發瀏覽器事件與自定義事件區別？

自定義事件物件，是jQuery模擬原生實現的
自定義事件可以傳遞引數

triggerHandler事件

trigger事件還有一個特性：會在DOM樹上冒泡，所以如果要阻止冒泡就需要在事件處理程式中返回false或呼叫事件物件中的.stopPropagation() 方法可以使事件停止冒泡

trigger事件是具有觸發原生與自定義能力的，但是存在一個不可避免的問題：事件物件event無法完美的實現，畢竟一個是瀏覽器給的，一個是自己模擬的。儘管 .trigger() 模擬事件物件，但是它並沒有完美的複製自然發生的事件，若要觸發通過 jQuery 繫結的事件處理函式，而不觸發原生的事件，使用.triggerHandler() 來代替

triggerHandler與trigger的用法是一樣的，重點看不同之處：

triggerHandler不會觸發瀏覽器的預設行為，.triggerHandler( "submit" )將不會呼叫表單上的.submit()
.trigger() 會影響所有與 jQuery 物件相匹配的元素，而 .triggerHandler() 僅影響第一個匹配到的元素
使用 .triggerHandler() 觸發的事件，並不會在 DOM 樹中向上冒泡。如果它們不是由目標元素直接觸發的，那麼它就不會進行任何處理
與普通的方法返回 jQuery 物件(這樣就能夠使用鏈式用法)相反，.triggerHandler() 返回最後一個處理的事件的返回值。如果沒有觸發任何事件，會返回 undefined