jQuery頁面載入事件
當DOM載入就緒可以查詢及操縱時系結一個要執行的函式。這是事件模塊中最重要的一個函式，因為它可以極大
地提高web應用程式的回應速度。簡單地說，這個方法純粹是對向window.load事件注冊事件的替代方法。通過
使用這個方法，可以在DOM載入就緒能夠讀取并操縱時立即呼叫你所系結的函式，而99.99%的JavaScript函式
都需要在那一刻執行。注意： 可以在同一個頁面中無限次地使用$(document).ready()事件。其中注冊的函式會
按照（代碼中的）先后順序依次執行。
例：$(document).ready(function(){
//代碼……
});
簡寫形式：$(function(){
//代碼……
});
jQuery滑鼠事件
jQuery滑鼠事件之click事件，滑鼠單擊指定物件時觸發的事件
click([[data], fn]):引數說明:fn 在匹配元素的click事件中系結的處理函式,可傳入data供函式處理
例：$(element).click(function(){
alert("click");
});
jQuery滑鼠事件之dblclick事件，滑鼠雙擊指定物件時觸發的事件
dblclick([[data],fn]):引數說明，與click的一樣
例：$(element).dblclick(function(){
alert("dblclick");
});
jQuery滑鼠事件之mousedown事件，滑鼠在指定元素位置按下時觸發的事件
例：$(element).mousedown(function(){
alert("mousedown ");
});
jQuery滑鼠事件之mouseup事件，滑鼠在指定元素位置松開時觸發的事件
例：$(element).mouseup(function(){
alert("mouseup");
});
jQuery滑鼠事件之mouseover事件，滑鼠指標移入指定元素時觸發的事件
例：$(element).mouseover(function(){
alert("mouseover");
});
jQuery滑鼠事件之mouseout事件，滑鼠指標移出指定元素時觸發的事件
例：$(element).mouseout(function(){
alert("mouseout");
});
jQuery滑鼠事件之mouseenter事件，與mouseenter事件類似
例：$(element).mouseenter(function(){
alert("mouseenter");
});
jQuery滑鼠事件之mouseleave事件，與mouseleave事件類似
例：$(element).mouseleave(function(){
alert("mouseleave");
});
注意：mouseover與mouseenter的區別：
mouseover：不論滑鼠指標穿過被選元素或其子元素，都會觸發 mouseover 事件
mouseenter：只有在滑鼠指標穿過被選元素時，才會觸發 mouseenter 事件
mouseout與mouseleave的區別：
mouseout：不論滑鼠指標離開被選元素還是任何子元素，都會觸發 mouseout 事件。
mouseleave：只有在滑鼠指標離開被選元素時，才會觸發 mouseleave 事件。
jQuery事件之hover事件
hover([over,]out)
一個模仿懸停事件（滑鼠移動到一個物件上面及移出這個物件）的方法。這是一個自定義的方法，它
為頻繁使用的任務提供了一種“保持在其中”的狀態。當滑鼠移動到一個匹配的元素上面時，會觸發
指定的第一個函式。當滑鼠移出這個元素時，會觸發指定的第二個函式。而且，會伴隨著對滑鼠是否
仍然處在特定元素中的檢測（例如，處在div中的影像），如果是，則會繼續保持“懸停”狀態，而
不觸發移出事件（修正了使用mouseout事件的一個常見錯誤）。
引數說明：over,out
over:滑鼠移到元素上要觸發的函式
out:滑鼠移出元素要觸發的函式
例：$(element).hover(
function () {//hover的第一個函式：滑鼠移入的時候觸發事件
$(this).addClass("changeColor");//添加一個類
},
function () {//hover的第二個函式：滑鼠移出的時候觸發事件
$(this).removeClass("changeColor");//移除類
});
jQuery表單事件
表單事件之change事件
//input標簽的change事件，當輸入框的值發生改變時觸發的事件
$("input").change(function (event){
console.log(event); //event：事件物件
});
//select標簽的change事件，對于下拉選擇框，當用戶做出選擇時觸發的事件
$("select").change(function (event){
console.log(event); //event：事件物件
});
//textarea標簽的change事件，當文本域的值發生改變時觸發的事件
$("textarea").change(function (event){
console.log(event); //event：事件物件
});
表單事件之select事件
當textarea(文本域)或input(文本型別的輸入框)中的文本被選擇時，會發生 select 事件。這個函式會
呼叫執行系結到select事件的所有函式，包括瀏覽器的默認行為。可以通過在某個系結的函式中回傳false
來防止觸發瀏覽器的默認行為。
例：$("input").select(function (){
console.log(123);
});
表單事件之submit事件
提交表單是一個最常見的業務需求，比如用戶注冊，一些資訊的輸入都是需要表單的提交。同樣的有時候
開發者需要在表單提交的時候過濾一些的資料、做一些必要的操作（例如：驗證表單輸入的正確性，如果
錯誤就阻止提交，從新輸入）此時可以通過submit事件，監聽下提交表單的這個動作，使用上非常簡單，
與基本事件引數處理保持一致
注意：form元素是有默認提交表單的行為，如果通過submit處理的話，需要禁止瀏覽器的這個默認行為
例如：<form onsubmit="return false;">，jQuery中可以直接在函式最后return false即可
例：$("form").submit(function () {
//寫驗證表單的代碼....
//return false; //阻止表單提交
});
jQuery事件物件
event.type：獲取事件的型別（觸發元素的事件型別）
例：$(element).click(function(event) {
alert(event.type); // "click"事件
});
event.pageX 和 event.pageY：獲取滑鼠當前相對于頁面的坐標
通過這2個屬性，可以確定元素在當前頁面的坐標值，滑鼠相對于檔案的左邊緣的位置（左邊）與 （頂邊）
的距離，簡單來說是從頁面左上角開始,即是以頁面為參考點,不隨滑動條移動而變化
event.preventDefault() 方法：阻止默認行為
在執行這個方法后，如果點擊一個鏈接（a標簽），瀏覽器不會跳轉到新的 URL 去了。我們可以用
event.isDefaultPrevented() 來確定這個方法是否(在那個事件物件上)被呼叫過了
event.stopPropagation() 方法：阻止事件冒泡
事件是可以冒泡的，為防止事件冒泡到DOM樹上，也就是不觸發的任何前輩元素上的事件處理函式
event.which：獲取在滑鼠單擊時，單擊的是滑鼠的哪個鍵
event.which 將 event.keyCode 和 event.charCode 標準化了。event.which也將正常化的按鈕按下
(mousedown 和 mouseupevents)，左鍵報告1，中間鍵報告2，右鍵報告3
event.currentTarget : 在事件冒泡程序中的當前DOM元素
冒泡前的當前觸發事件的DOM物件, 等同于this
this和event.target的區別：
js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化，它永遠是直接接受事件的目
標DOM元素
this和event.target都是dom物件
如果要使用jquey中的方法可以將他們轉換為jquery物件。比如this和$(this)的使用、event.target
和$(event.target)的使用
jQuery鍵盤事件
jQuery鍵盤事件之keydown()與keyup事件
keydown()事件：當鍵盤或按鈕被按下時，發生keydown事件。
keyup()事件：當按鈕被松開時，發生keyup事件。它發生在當前獲得焦點的元素上。
注意：keydown事件觸發在文字還沒敲進文本框，這時如果在keydown事件中輸出文本框中的文本，得到的
是觸發鍵盤事件前的文本，而keyup事件觸發時整個鍵盤事件的操作已經完成，獲得的是觸發鍵盤事
件后的文本
jQuery鍵盤事件之keypress()事件
keypress()事件：只能捕獲單個字符，不能捕獲組合鍵，無法回應系統功能鍵（如delete，backspace），
不區分小鍵盤和主鍵盤的數字字符，KeyPress主要用來接收字母、數字等ANSI字符，而
KeyDown 和 KeyUP 事件程序可以處理任何不被 KeyPress 識別的擊鍵。諸如：功能鍵
（F1-F12）、編輯鍵、定位鍵以及任何這些鍵和鍵盤換檔鍵的組合等。
jQuery事件的系結與解綁
事件系結on()
之前學的滑鼠事件，表單事件與鍵盤事件都有個特點，就是直接給元素系結一個處理函式，所有這類事件
都是屬于快捷處理。翻開原始碼其實可以看到，所有快捷事件在底層的處理都是通過一個"on"方法來實作的。
jQuery on()方法是官方推薦的系結事件的一個方法。
基本用法：on(events,[selector],[data],fn) 在選擇元素上系結一個或多個事件的事件處理函式。
最常見的給元素系結一個點擊事件，對比一下快捷方式與on方式的不同
例：$("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式
on是可以自定義事件名，也可以多事件系結
例：1、多個事件系結同一個函式
$("#elem").on("mouseover mouseout",function(){});
//通過空格分離，傳遞不同的事件名，同時系結多個事件
2、多個函式系結同一個事件
$("#elem").on({
mouseover:function(){},
mouseout:function(){}，
click:function(){}
});
//通過空格分離，傳遞不同的事件名，同時系結多個事件，每一個事件執行自己的回呼方法
卸載事件off()
通過on()系結的事件處理程式，用off() 方法移除該系結，根據on系結事件的一些特性，off方法也可以通
過相應的傳遞組合的事件名，名字空間，選擇器或處理函式來移除系結在元素上指定的事件處理函式。當
有多個過濾引數時，只有與這些引數完全匹配的事件處理函式才會被移除
例：$("elem").off("mousedown") //卸載一個事件，可以用回呼函式，也可以不用
$("elem").on("mousedown mouseup",[fn]) //卸載兩個事件，可以用回呼函式，也可以不用
$("elem").off()* //卸載所有事件
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/53051.html
標籤：非技術區
上一篇：jQuery DOM節點操作
下一篇：jQuery Ajax總結