JQuery知識快覽之二—事件

時間 2019-11-11

原文原文鏈接

事件是腳本語言的核心。本文將爲你們介紹JQuery支持的一些事件和如何自定義事件css

JQuery內置事件

1.Document加載事件html

JQuery提供了ready，load，unload三個Document加載事件。load和unload事件從1.8版開始就不同意使用了，ready能夠說是咱們用得最多的一個事件。這是一個最特別的事件，全部的JQuery語句的執行都始於ready事件。通常都在這個事件的響應函數裏綁定其餘的響應函數，執行代碼等。jquery

相對於JavaScript的load事件來講，ready事件更優，由於load事件是在一個頁面的全部資源，如圖片等都下載完成之後發生，而ready事件在DOM下載完成後就發生了。數組

它有多種使用形式：瀏覽器

$( document ).ready( handler )
$().ready( handler ) (this is not recommended)
$( handler )

在用ready事件時須要注意以下四點app

1)ready函數的位置:若是腳本依賴於CSS屬性，則須要在引入css文件以後引入腳本文件，若是腳本依賴於某個資源，則須要用load事件。函數

2)<body onload="">屬性和JQuery的ready，load事件衝突，不要一塊兒使用。學習

3)不要使用.on("ready",handler)來代替.ready函數。this

4)$和其餘庫中定義衝突時，可用以下形式寫代碼:spa

jQuery( document ).ready(function( $ ) {
// Code using $ as usual goes here.
});

2.鼠標事件

click

dblclick

mousedown

mouseup

mousemove

mouseenter

mouseleave

mouseover

mouseout

hover

注意事項：

1)最好不要對同一元素同時添加click和dblclick事件的響應函數，由於對這兩個事件的區分會形成必定的困擾

2)mouseenter,mouseleave和mouseover,mouseout的不一樣在於，當鼠標移動到某元素上或離開某元素時，其祖先節點也會接收到mouseover或mouseout事件，可是不會接收到mouseenter或mouseleave事件,因此推薦使用mouseenter和mouseleave。

3)hover是mouseenter,mouseleave的組合。

3.鍵盤事件

keydown

keyup

keypress

注意事項:

1)鍵盤事件只發送給當前的焦點元素，由於form經常可以獲得焦點，因此咱們常把事件綁定到form上，若是想實現快捷鍵，能夠將事件綁定到document上。

2)當輸入文本時適合用keypress，當快捷鍵時適合用keydown,keyup.

4.表單事件

focus

blur

focusin

focusout

change

select

submit

注意事項:

1)focusin,focusout和focus,blur的區別在於，當某元素得到或者失去焦點時，其祖先節點也會收到focusin或focusout消息，而不會收到focus或blur消息。

2)對選擇框等元素，只要用戶作出選擇就會觸發change事件，而對<textarea>等元素，當元素失去焦點時纔有可能觸發change事件。

3)select事件只針對<input type="text">和<textarea>的文本選取操做，設置文本的插入點並不會引發select事件，選擇網頁靜態文本也不會引發select事件

5.瀏覽器事件

resize:瀏覽器窗口的resize事件，一次resize窗口的動做可能會引起多個resize事件。

scroll:瀏覽器窗口，可滾動的frame，有scroll屬性的元素都能產生scroll事件

error：1.8版開始不同意使用了

JQuery事件函數

JQuery針對每一個事件，都至少定義了兩個版本的事件函數，以click事件爲例，JQuery定義了兩種函數，都名爲click，只是參數不一樣，一個函數用函數作參數，用於進行綁定事件處理函數，另外一個函數不須要參數，用於觸發事件。如

#("button").click(function(){
//do things when button clicked.
});

$("button").click();//trigger click event

有的觸發事件的函數如select甚至能產生select行爲，調用.select()能選中當前元素裏的全部文本。

在事件處理函數中，能夠用帶參數的函數形式來獲取event中的數據，能夠用$(this)來獲取觸發事件的對象。下面看一個簡單的例子

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>click demo</title>
<style>
div {
float: left;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div>
<ul>
<li>click me</li>
<li>click me</li>
</ul>
</div>
<script>
$("ul li").click(function(event){
$(this).html("Mouse clicked at pos:"+event.pageX+","+event.pageY);
});
</script>
</body>
</html>

JQuery事件對象

在上面的例子中咱們用到了事件對象裏的屬性，下面咱們來簡單看一下事件對象有哪些屬性(部分我的認爲重要的屬性，不全):

target

currentTarget(不推薦)

注意:this和currentTarget都是綁定事件的對象，對於delegated events，則是selector匹配的元素。而target是真正觸發消息的對象。target爲currentTarget對象或其子孫節點。

relatedTarget獲取相關對象，如對於mouseleave事件，相關對象是得到mouseenter事件

注意:target,currentTarget,relatedTarget和this都是DOM元素，還須要要用$來轉化爲JQuery能操做的對象，如

$(event.currentTarget).css("background-color","red");

pageX

pageY

which

對於mousedown和mouseup事件來講，1表明左鍵，2表明中間鍵，3表明右鍵

對於鍵盤事件來講，則是對應的ASCII碼

altKey

ctrlKey

shiftKey

metaKey

type

data:數據傳入方式爲.click( [eventData ], handler(eventObject) )

JQuery的事件執行流程

一個事件觸發後，JQuery將先查看觸發該事件的元素是否有綁定對應的消息處理函數，若是有則按消息處理函數的綁定順序依次執行，當該元素的事件都處理完了後，若是該事件是冒泡事件，則依次向其父節點進行冒泡的過程，繼續檢查父節點，父節點的父節點。。。最後再執行該消息的默認響應行爲。

經過對事件對象執行必定的操做，能改變這個流程。

event.preventDefault();能夠禁止消息的默認響應行爲。

event.stopImmediatePropagation();禁止以後的消息處理函數和冒泡過程，不由止默認響應行爲。

event.stopPropagation();不由止以後的消息處理函數和默認響應行爲，可是禁止冒泡過程。

在函數裏return false;效果和event.preventDefault()+event.stopPropagation()同樣。甚至你能夠直接用false來代替一個return false的函數，以下：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>click demo</title>
<style>
div {
float: left;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div>
<ul>
<li><a href="baidu.com">link</a></li>
</ul>
</div>
<script>
$("li").click(false);
</script>
</body>
</html>

下面三個函數分別判斷上面三個函數是否已經執行。

event.isDefaultPrevented()
event.isImmediatePropagationStopped()
event.isPropagationStopped()

自定義事件

在某些狀況下，你可能須要定製你本身的事件，下面是JQuery官網給的一個簡單的示例：

$( "#foo" ).on( "custom", function( event, param1, param2 ) {
alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );

若是不想用自定義數據，可簡單的寫成這樣

$( "#foo" ).on( "custom", function() {
alert("custom event happened");
});
$( "#foo").trigger( "custom");

事件進階

前面，咱們看到用on來綁定了一個自定義事件，用trigger來觸發了這個自定義事件，其實JQuery爲事件的綁定和觸發提供了一些更復雜的處理方法，下面咱們來學習一下。

1.事件的觸發

JQuery提供了trigger和triggerHandler兩種觸發事件的函數。

.trigger會爲其選擇器中全部的元素觸發事件，且事件會進行冒泡處理，可是不會引發事件的默認行爲。

.triggerHandler只會爲其選擇器中的第一個元素觸發事件，且事件不會進行冒泡處理，也不會引發事件的默認行爲。

另外兩個函數的返回值也是不同的。

2.事件處理函數的綁定和解綁定

1.7版新增了on和off兩個函數來進行事件處理函數的綁定和解綁定，這兩個函數基本代替了原有的bind,unbind和delegate,undelegate的功能，因此如今JQuery官方推薦用on和off來替代另兩組函數。

1)on有兩種形式

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

其中第二種形式的參數events能夠是事件字符串和相應處理函數的數組，我的不喜歡這種形式，以爲看着亂，不如多寫幾個on呢。

當不提供selector時，爲直接綁定模式，當事件傳遞到被綁定的對象時，就會被觸發。

當提供selector時，爲代理綁定模式，當事件傳遞到被綁定的對象時，會檢查在冒泡過程當中，是否存在知足selector條件的元素，若是有，則會被觸發，沒有則不會觸發。

爲何須要有代理綁定模式呢？有兩個對代理綁定模式需求的情景：

a.由於進行事件綁定的時候，被綁定的對象必須已經存在，因此對於那些會動態加入的元素，就能夠用代理綁定模式，將事件綁定到其已經存在的最接近的祖先節點上。

b.某父節點下有多個節點須要響應同一個事件。這時使用代理綁定模式能提升效率。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>click demo</title>
<style>
div {
float: left;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div>
<ul>
<li><a href="baidu.com">link</li>
</ul>
</div>
<script>
$("ul").on("click",$("a"),function(){
  alert("a is clicked");
});
$("li").click(function(){
  alert("li is clicked");
});

</script>
</body>
</html>