前端學習JQuery篇02——基本語法（事件）

時間 2019-11-18

原文原文鏈接

頁面載入

ready(fn)javascript

事件處理

on(eve,[sel],[data],fn) 1.7+	在選擇元素上綁定一個或多個事件的事件處理函數。	$("p").on("click", function(){ alert( $(this).text() ); });html
off(eve,[sel],[fn])1.7+	在選擇元素上移除一個或多個事件的事件處理函數。
bind(type,[data],fn)3.0-	爲每一個匹配元素的特定事件綁定事件處理函數。jQuery 3.0中已棄用此方法，請用 on()代替。
one(type,[data],fn)	爲每個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數。
trigger(type,[data])	在每個匹配的元素上觸發某類事件。（自動觸發，經常使用於傳遞參數，data爲對象類型）
triggerHandler(type, [data])	與trigger相似，區別在表格以後
unbind(t,[d\|f])3.0-	bind()的反向操做，從每個匹配的元素中刪除綁定的事件。jQuery 3.0中已棄用此方法，請用 off()代替。

trigger和triggerHandler的區別

* 第一，他不會觸發瀏覽器默認事件。java

* 第二，只觸發jQuery對象集合中第一個元素的事件處理函數。jquery

* 第三，這個方法的返回的是事件處理函數的返回值，而不是據有可鏈性的jQuery對象。此外，若是最開始的jQuery對象集合爲空，則這個方法返回 undefined 。chrome

事件委託

1. live(type,[data],fn) 1.7-

概述
jQuery 給全部匹配的元素附加一個事件處理函數，即便這個元素是之後再添加進來的也有效。瀏覽器

這個方法是基本是的 .bind() 方法的一個變體。使用 .bind() 時，選擇器匹配的元素會附加一個事件處理函數，而之後再添加的元素則不會有。爲此須要再使用一次 .bind() 才行。好比說閉包

<body>
<div class="clickme">Click here</div>
</body>

能夠給這個元素綁定一個簡單的click事件：app

$('.clickme').bind('click', function() {
alert("Bound handler called.");
});

當點擊了元素，就會彈出一個警告框。而後，想象一下這以後有另外一個元素添加進來了。函數

$('body').append('<div class="clickme">Another target</div>');

儘管這個新的元素也可以匹配選擇器 ".clickme" ，可是因爲這個元素是在調用 .bind() 以後添加的，因此點擊這個元素不會有任何效果。測試

.live() 就提供了對應這種狀況的方法。若是咱們是這樣綁定click事件的：

$('.clickme').live('click', function() {
alert("Live handler called."); 
});

而後再添加一個新元素：

$('body').append('<div class="clickme">Another target</div>');

而後再點擊新增的元素，他依然可以觸發事件處理函數。

事件委託

.live() 方法能對一個尚未添加進DOM的元素有效，是因爲使用了事件委託：綁定在祖先元素上的事件處理函數能夠對在後代上觸發的事件做出迴應。傳遞給 .live() 的事件處理函數不會綁定在元素上，而是把他做爲一個特殊的事件處理函數，綁定在 DOM 樹的根節點上。在咱們的例子中，當點擊新的元素後，會依次發生下列步驟：

生成一個click事件傳遞給來處理
因爲沒有事件處理函數直接綁定在 <divgt; 上，因此事件冒泡到DOM樹上
事件不斷冒泡一直到DOM樹的根節點，默認狀況下上面綁定了這個特殊的事件處理函數。
執行由 .live() 綁定的特殊的 click 事件處理函數。
這個事件處理函數首先檢測事件對象的 target 來肯定是否是須要繼續。這個測試是經過檢測 $(event.target).closest('.clickme') 可否找到匹配的元素來實現的。
若是找到了匹配的元素，那麼調用原始的事件處理函數。
因爲只有在事件發生時纔會在上面的第五步裏作測試，所以在任什麼時候候添加的元素都可以響應這個事件。

附加說明

.live() 雖然頗有用，但因爲其特殊的實現方式，因此不能簡單的在任何狀況下替換 .bind()。主要的不一樣有：

在jQuery 1.4中，.live()方法支持自定義事件，也支持全部的 JavaScript 事件。在jQuery 1.4.1中，甚至也支持 focus 和 blue 事件了（映射到更合適，而且能夠冒泡的focusin和focusout上）。另外，在jQuery 1.4.1中，也能支持hover（映射到"mouseenter mouseleave"）。然而在jQuery 1.3.x中，只支持支持的JavaScript事件和自定義事件：click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.
.live() 並不徹底支持經過DOM遍歷的方法找到的元素。取而代之的是，應當老是在一個選擇器後面直接使用 .live() 方法，正如前面例子裏提到的。
當一個事件處理函數用 .live() 綁定後，要中止執行其餘的事件處理函數，那麼這個函數必須返回 false。僅僅調用 .stopPropagation() 沒法實現這個目的。
參考 .bind() 方法能夠得到更多關於事件綁定的信息。

在jQuery 1.4.1 中，.live() 能接受多個，用空間分隔事件，在提供相似.bind()的功能。例如，咱們能夠「live 」同時綁定mouseover和mouseout事件,像這樣：

$('.hoverme').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
// do something on mouseover
} else {
// do something on mouseout
}
});

在jQuery 1.4.3中:你能夠綁定一個或多個事件類型的字符串和函數的數據映射來執行他們

$('.hoverme').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
// do something on mouseover
} else {
// do something on mouseout
}
});

在jQuery 1.4 中，data參數能夠用於把附加信息傳遞給事件處理函數。一個很好的用處是應付由閉包致使的問題。能夠參考 .bind() 的討論來得到更多信息。

在jQuery 1.4 中， live事件能夠綁定到「context」DOM元素，而不是默認的文檔的根。要設置此背景下，咱們經過在一個單一的DOM元素(而不是一個jQuery集合或選擇器)使用jQuery() function's second argument。

$('div.clickme', $('#container')[0]).live('click', function() {
// Live handler called.
});

從 jQuery 1.7 開始，再也不建議使用 .live() 方法。請使用 .on() 來添加事件處理。使用舊版本的用戶，應該優先使用 .delegate() 來替代 .live()。

2. die(type,[fn]) 1.7-

從元素中刪除先前用.live()綁定的全部事件.(此方法與live正好徹底相反。)

若是不帶參數，則全部綁定的live事件都會被移除。
你能夠解除用live註冊的自定義事件。
若是提供了type參數，那麼會移除對應的live事件。
若是也指定了第二個參數function,則只移出指定的事件處理函數。

從 jQuery 1.7 開始，再也不建議使用 .die() (以及它的互補方法 .live())。請使用 .off() 來代替，用於移除經過 .on() 綁定的事件處理。

3.delegate(s,[t],[d],fn) 3.0-

指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。（與live()等價）

jQuery 3.0中已棄用此方法，請用 on()代替。

使用 delegate() 方法的事件處理程序適用於當前或將來的元素（好比由腳本建立的新元素）。

4.undelegate([s,[t],fn]) 3.0-

刪除由 delegate() 方法添加的一個或多個事件處理程序。

jQuery 3.0中已棄用此方法，請用 off()代替。

事件切換

1.hover([over,]out)

一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法。這是一個自定義的方法，它爲頻繁使用的任務提供了一種「保持在其中」的狀態。

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

2.toggle([spe],[eas],[fn])1.9*　

用於綁定兩個或多個事件處理器函數，以響應被選元素的輪流的 click 事件。

參數
fn,fn2,[fn3,fn4,...]Function,....V1.0 Removed 1.9

fn:第一數次點擊時要執行的函數。
fn2:第二數次點擊時要執行的函數。
fn3,fn4,...:更屢次點擊時要執行的函數。

[speed] [,fn]String,FunctionV1.0

speed: 隱藏/顯示效果的速度。默認是 "0"毫秒。可能的值：slow，normal，fast。"
fn:在動畫完成時執行的函數，每一個元素執行一次。

[speed], [easing ], [fn ]String,String,FunctionV1.4.3

speed: 隱藏/顯示效果的速度。默認是 "0"毫秒。可能的值：slow，normal，fast。"
easing:(Optional) 用來指定切換效果，默認是"swing"，可用參數"linear"
fn:在動畫完成時執行的函數，每一個元素執行一次。

switchBooleanV1.3

用於肯定顯示/隱藏的開關。如：true - 顯示元素，false - 隱藏元素

1.9版本 .toggle(function, function, … ) 方法刪除,jQuery Migrate（遷移）插件能夠恢復此功能。

事件

blur([[data],fn])	當元素失去焦點時觸發 blur 事件。
change([[data],fn])	當元素的值發生改變時，會發生 change 事件。
click([[data],fn])	觸發每個匹配元素的click事件。
dblclick([[data],fn])	當雙擊元素時，會發生 dblclick 事件。
error([[data],fn]) 1.8-	當元素遇到錯誤（沒有正確載入）時，發生 error 事件。
focus([[data],fn])	當元素得到焦點時，觸發 focus 事件。
focusin([data],fn)	當元素得到焦點時，觸發 focusin 事件。focusin事件跟focus事件區別在於，他能夠在父元素上檢測子元素獲取焦點的狀況。
focusout([data],fn)	當元素失去焦點時觸發 focusout 事件。focusin事件跟focus事件區別在於，他能夠在父元素上檢測子元素獲取焦點的狀況。
keydown([[data],fn])	當鍵盤或按鈕被按下時，發生 keydown 事件。註釋：若是在文檔元素上進行設置，則不管元素是否得到焦點，該事件都會發生。
keypress([[data],fn])	當鍵盤或按鈕被按下時，發生 keypress 事件。與 keydown 事件不一樣，每插入一個字符，就會發生 keypress 事件。
keyup([[data],fn])	當按鈕被鬆開時，發生 keyup 事件。它發生在當前得到焦點的元素上。
mousedown([[data],fn])	當鼠標指針移動到元素上方，並按下鼠標按鍵時，會發生 mousedown 事件。mousedown 與 click 事件不一樣，mousedown 事件僅須要按鍵被按下，而不須要鬆開便可發生。
mouseenter([[data],fn])	當鼠標指針穿過元素時，會發生 mouseenter 事件。該事件大多數時候會與mouseleave 事件一塊兒使用。
mouseleave([[data],fn])	當鼠標指針離開元素時，會發生 mouseleave 事件。
mousemove([[data],fn])	當鼠標指針在指定的元素中移動時，就會發生 mousemove 事件。
mouseout([[data],fn])	當鼠標指針從元素上移開時，發生 mouseout 事件。與 mouseleave 事件不一樣，不論鼠標指針離開被選元素仍是任何子元素，都會觸發 mouseout 事件。只有在鼠標指針離開被選元素時，纔會觸發 mouseleave 事件。
mouseover([[data],fn])	當鼠標指針位於元素上方時，會發生 mouseover 事件。與 mouseenter 事件不一樣，不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。
mouseup([[data],fn])	當在元素上放鬆鼠標按鈕時，會發生 mouseup 事件。
resize([[data],fn])	當調整瀏覽器窗口的大小時，發生 resize 事件。
scroll([[data],fn])	當用戶滾動指定的元素時，會發生 scroll 事件。
select([[data],fn])	當 textarea 或文本類型的 input 元素中的文本被選擇時，會發生 select 事件。
submit([[data],fn])	當提交表單時，會發生 submit 事件。該事件只適用於表單元素。
unload([[data],fn]) 1.8-	在當用戶離開頁面時，會發生 unload 事件。

focusin 與 focusout的瀏覽器支持

幾乎全部的瀏覽器都支持focus和blur事件，但對於focusin和focusout 就不是這樣理想了。Firefox中不支持focusin和focusout事件；chrome和safari中只有經過addEventListener方式綁定事件才能正常使用，其餘方式綁定都不行；
面對這樣的瀏覽器支持彷佛很頭痛，慶幸的是jQuery對focusin和focusout作了兼容，使用$.focusin和$.focusout實現事件綁定，在全部瀏覽器中都支持；

keydown([[data],fn])參數
fn Function V1.0

在每個匹配元素的keydown事件中綁定的處理函數。

[data],fn String,Function V1.4.3

data:keydown([Data], fn) 可傳入data供函數fn處理。
fn:在每個匹配元素的keydown事件中綁定的處理函數

keydown和keypress，keyup的區別

keydown：用戶在鍵盤上按下某按鍵是發生。一直按着某按鍵則會不斷觸發（opera瀏覽器除外）。
keypress：用戶按下一個按鍵，併產生一個字符時發生（也就是無論相似shift、alt、ctrl之類的鍵，就是說用戶按了一個能在屏幕上輸出字符的按鍵keypress事件纔會觸發）。一直按着某按鍵則會不斷觸發。
keyup：用戶釋放某一個按鍵是觸發。

mouseleave([[data],fn])，mousemove([[data],fn])，mouseout([[data],fn])，mouseover([[data],fn])的區別

unload([[data],fn]) 1.8- 事件觸發