jQurey 事件
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
開發工具與關鍵技術：Adobe Dreamweaver JavaScript
作者：彭琦旺
撰寫時間：2020年5月2日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
GET: jQueryEvent jQuery基礎三 事件 ： 滑鼠事件 鍵盤事件 表單事件
1.$(document).ready(function(){})頁面載入事件 js window.onload
$(document).ready() 方法
當DOM載入就緒可以查詢及操縱時系結一個要執行的函式。
這是事件模塊中最重要的一個函式，因為它可以極大地提高web應用程式的回應速度。
簡單地說，這個方法純粹是對向window.load事件注冊的替代方法。通過使用這個方法，
可以在DOM載入就緒能夠讀取并操縱時立即呼叫你所系結的函式，而99.99%的JavaScript函式都需要在那一刻執行。
注意：可以在同一個頁面中無限次地使用$(document).ready()事件。
其中注冊的函式會按照（代碼中的）先后順序依次執行。
引數說明：fn 要在DOM就緒時執行的函式
在DOM加載完成時運行的代碼，可以這樣寫：
jQuery 代碼:
$(document).ready(function(){
// 在這里寫你的代碼...
});
//簡寫形式
$(function(){
// 在這里寫你的代碼...
})
1.1 jQuery 滑鼠事件
1. click() 滑鼠單擊事件 // js onclick
2. dblclick() 滑鼠雙擊事件 // js ondblclick
3. mousedown() 當滑鼠指標移動到元素上方，并按下滑鼠按鍵時，會發生mousedown事件
4. mouseup() 當在元素上放松滑鼠按鈕時，會發生 mouseup 事件。
5. mouseenter() 當滑鼠指標穿過元素時，會發生mouseenter事件。該事件大多數時候會與mouseleave 事件一起使用。
6. mouseleave() 當滑鼠指標離開元素時，會發生 mouseleave 事件。該事件大多數時候會與mouseenter 事件一起使用
7.mouseover() 當滑鼠指標位于元素上方時，會發生 mouseover 事件。該事件大多數時候會與 mouseout 事件一起使用
8.mouseout() 當滑鼠指標從元素上移開時，發生 mouseout 事件。該事件大多數時候會與 mouseover 事件一起使用
9. mousemove() 當滑鼠指標在指定的元素中移動時，就會發生 mousemove 事件。
mousemove事件處理函式會被傳遞一個變數——事件物件，其.clientX 和 .clientY 屬性代表滑鼠的坐標
注意！！！
mouseover與mouseenter的區別：
mouseover如果滑鼠指標穿過選定元素的任何子元素，都會觸發mouseover事件，
mouseenter如果滑鼠指標穿過選定元素的任何子元素不會觸發mouseenter事件
mouseout與mouseleave的區別：
mouseout不論滑鼠指標離開被選元素還是任何子元素，都會觸發mouseout事件。
mouseleave只有在滑鼠指標離開被選元素時，才會觸發 mouseleave 事件
簡而言之：就是移動到選定元素的子元素上面是否觸發事件
mouseover 子元素 觸發
mouseenter 子元素 不觸發
mouseout 子元素 觸發
mouseleave 子元素 不觸發
1.2 jQuery 表單事件
1.1 jQuery中的focus()獲取焦點事件與blur()失去焦點事件（滑鼠事件）
1. focus() 事件
當元素獲得焦點時，觸發focus事件。可以通過滑鼠點擊或者鍵盤上的TAB導航觸發。這將觸發所有系結的focus函式
2. blur() 事件
當元素失去焦點時觸發 blur 事件。
這個函式會呼叫執行系結到blur事件的所有函式，包括瀏覽器的默認行為。可以通過回傳false來防止觸發瀏覽器的默認行為。blur事件會在元素失去焦點的時候觸發，既可以是滑鼠行為，也可以是按tab鍵離開的
1.2 jQuery中的focusin()事件與focusout()事件
3. focusin() 事件
當元素獲得焦點時，觸發 focusin 事件。
focusin事件跟focus事件區別在于，他可以在父元素上檢測子元素獲取焦點的情況。
4. focusout() 事件
當元素失去焦點時觸發 focusout 事件。
focusout事件跟blur事件區別在于，他可以在父元素上檢測子元素失去焦點的情況
1.3 jQuery中的表單事件 change()事件
<input>元素，<textarea>和<select>元素的值都是可以發生改變的，開發者可以通過change事件去監聽這些改變的動作
input元素
監聽value值的變化，當有改變時，失去焦點后觸發change事件。對于單選按鈕和復選框，當用戶用滑鼠做出選擇時，該事件立即觸發。
select元素
對于下拉選擇框，當用戶用滑鼠作出選擇時，該事件立即觸發
textarea元素
多行文本輸入框，當有改變時，失去焦點后觸發change事件
1.4 jQuery中的表單事件 select()事件
當textarea或文本型別的input元素中的文本被選擇時，會發生 select 事件。
這個函式會呼叫執行系結到select事件的所有函式，包括瀏覽器的默認行為。
可以通過在某個系結的函式中回傳false來防止觸發瀏覽器的默認行為。
1.5 jQuery表單事件中的 submit()事件
提交表單是一個最常見的業務需求，比如用戶注冊，一些資訊的輸入都是需要表單的提交。
同樣的有時候開發者需要在表單提交的時候過濾一些的資料、做一些必要的操作
（例如：驗證表單輸入的正確性，如果錯誤就阻止提交，從新輸入）此時可以通過submit事件，監聽下提交表單的這個動作
使用上非常簡單，與基本事件引數處理保持一致
這里需要特別注意：
form元素是有默認提交表單的行為，如果通過submit處理的話，需要禁止瀏覽器的這個默認行為
<form onsubmit="return false;"></form>，jQuery中可以直接在函式中最后結尾return false即可如果你要阻止表單提交:
jQuery 代碼:
$("form").submit( function () {
return false;
} );
1.6 事件物件：Query事件物件的屬性和方法
/*
事件物件的屬于與方法有很多，但是我們經常用的只有那么幾個，這里我主要說下作用與區別
event.type：獲取事件的型別
觸發元素的事件型別
$("a").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)的使用；
1.3 jQuery事件 鍵盤事件
1.1 jQuery鍵盤事件 keydown()與keyup()事件
滑鼠有mousedown,mouseup之類的事件，這是根據人的手勢動作分解的2個觸發行為。
相對應的鍵盤也有這類事件，將用戶行為分解成2個動作，鍵盤按下與松手，針對這樣的2種動作，
jQuery分別提供了對應keydown與keyup方法來監聽
- keydown()事件
當鍵盤或按鈕被按下時，發生keydown事件。
- keyup()事件
當按鈕被松開時，發生keyup事件。它發生在當前獲得焦點的元素上。
1.2jQuery鍵盤事件 keypress()事件
在input元素上系結keydown事件會發現一個問題：
注意：每次獲取的內容都是之前輸入的，當前輸入的獲取不到
keydown事件觸發在文字還沒敲進文本框，這時如果在keydown事件中輸出文本框中的文本，
得到的是觸發鍵盤事件前的文本，而keyup事件觸發時整個鍵盤事件的操作已經完成，
獲得的是觸發鍵盤事件后的文本
當瀏覽器捕獲鍵盤輸入時，還提供了一個keypress的回應，這個跟keydown是非常相似
keypress事件與keydown和keyup的主要區別
只能捕獲單個字符，不能捕獲組合鍵
無法回應系統功能鍵（如delete，backspace）
不區分小鍵盤和主鍵盤的數字字符
總而言之，
KeyPress主要用來接收字母、數字等ANSI字符，
而 KeyDown 和 KeyUP 事件程序可以處理任何不被 KeyPress 識別的擊鍵。
諸如：功能鍵（F1-F12）、編輯鍵、定位鍵以及任何這些鍵和鍵盤換檔鍵的組合等。
1.4 jQuery 事件的系結和解綁
1.1 事件的系結和解綁 on()的多事件系結
之前學的滑鼠事件，表單事件與鍵盤事件都有個特點，就是直接給元素系結一個處理函式，
所有這類事件都是屬于快捷處理。翻開原始碼其實可以看到，所有的快捷事件在底層的處理都是通過一個"on"方法來實作的。
jQuery on()方法是官方推薦的系結事件的一個方法。
基本用法：on(events,[selector],[data],fn) 在選擇元素上系結一個或多個事件的事件處理函式。
最常見的給元素系結一個點擊事件，對比一下快捷方式與on方式的不同
$("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式
最大的不同點就是on是可以自定義事件名，當然不僅僅只是如何，繼續往下看
多個事件系結同一個函式
$("#elem").on("mouseover mouseout",function(){ });
通過空格分離，傳遞不同的事件名，可以同時系結多個事件
多個事件系結不同函式
$("#elem").on({
mouseover:function(){},
mouseout:function(){}，
click:function(){}
});
通過空格分離，傳遞不同的事件名，可以同時系結多個事件，每一個事件執行自己的回呼方法
給元素系結一個點擊事件 on方式
$("#div1").on("click", function (e) {
$(this).text("觸發了：" + e.type);
})
//多個事件系結同一個函式
$("#div2").on("mousedown mouseup", function (e) {
$(this).text("觸發了：" + e.type);
})
//多個事件系結不同函式
$("#div3").on({
mousedown: function () {
$(this).attr("class","bgGreen");
},
mouseup: function () {
$(this).removeAttr("class");
}
});
uj5u.com熱心網友回復：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/54515.html
標籤：JavaScript