畢設(shè)要翻譯短論文境输，就網(wǎng)上隨便找了篇讓女朋友翻譯了下阎肝，哈哈纺弊，還不錯(cuò)。沒錯(cuò)铭拧，我就是來(lái)花式秀女友的。格式亂亂的恃锉，明天改
jQuery有很多快捷的方法搀菩，像contextmenu()，hover()和keyup()破托，處理不同的事件肪跋。除了專門的方法，jQuery也提供了一個(gè)通用的方法土砂，它允許你把任何事件的處理程序：在（'eventname州既，處理程序）。但是萝映，這些方法只是包裝標(biāo)準(zhǔn)的DOM事件吴叶，你可以在純JavaScript這些事件添加處理程序。
在本教程中序臂，我們將快速看一下所有這些事件的方法蚌卤，它被分為五大類，并討論在與他們合作時(shí)奥秆，最好的做法逊彭。
- 瀏覽器事件
這一類有三個(gè)事件。這些都是錯(cuò)誤构订、調(diào)整和滾動(dòng)侮叮。當(dāng)元素如圖像不正確加載時(shí)，該錯(cuò)誤事件被觸發(fā)悼瘾。它的快捷方法已被否決因?yàn)閖Query 1.8版本签赃，所以你現(xiàn)在應(yīng)該使用('error', handler)。
- resize()事件
每當(dāng)瀏覽器窗口更改時(shí)分尸，該事件就觸發(fā)锦聊。不同的瀏覽器可以根據(jù)執(zhí)行不同的方式調(diào)用調(diào)整大小處理程序。Internet Explorer和基于WebKit的瀏覽器一直調(diào)用處理程序箩绍，像Opera這樣的瀏覽器只在調(diào)整大小在調(diào)整結(jié)束的時(shí)候.
這段代碼下面互換基于窗口寬度的圖像源孔庭。
這個(gè)代碼演示展示了在行動(dòng)的事件：
2 滾動(dòng)事件
當(dāng)用戶滾動(dòng)到特定元素中的不同位置時(shí)，可以將該事件設(shè)置為一個(gè)元素。除了窗口對(duì)象圆到，一個(gè)滾動(dòng)條的任何元素都可以觸發(fā)此事件怎抛。例如，設(shè)置滾動(dòng)overflow屬性的任何元素芽淡，或任何可滾動(dòng)的iframe马绝，可以解雇這一事件。
但是挣菲，當(dāng)滾動(dòng)位置更改時(shí)富稻，該處理程序被調(diào)用。滾動(dòng)的原因是不相關(guān)的白胀。它可以在按下箭頭鍵觸發(fā)椭赋，點(diǎn)擊或拖動(dòng)滾動(dòng)條或使用鼠標(biāo)滾輪。在下面的代碼中或杠，我們檢查用戶是否已滾動(dòng)下跌超過500px和執(zhí)行一些操作哪怔。
在下面的演示，如果你保持使用滾動(dòng)和接近結(jié)束時(shí)你應(yīng)該看到一個(gè)通知向抢，你幾乎是在網(wǎng)頁(yè)的底部：
3 文檔加載事件
jQuery三事件被解雇了基于文檔或DOM的狀態(tài)的方法认境。這些都是加載，未加載和準(zhǔn)備挟鸠。
load（）可以用來(lái)將處理任何元素加載一個(gè)外部資源元暴，如圖片、腳本兄猩、內(nèi)嵌框架和窗口對(duì)象本身茉盏。當(dāng)元素連接到，以及所有的子元素枢冤，已完全加載時(shí)發(fā)生火災(zāi)鸠姨。當(dāng)使用圖像時(shí)，它帶來(lái)了一些問題淹真。第一是它不能正確地泡了DOM樹讶迁。二是既不可靠也不跨瀏覽器。
當(dāng)用戶在瀏覽網(wǎng)頁(yè)時(shí)核蘸，卸載事件被觸發(fā)巍糯。這可能發(fā)生，因?yàn)橛脩酎c(diǎn)擊了一個(gè)鏈接客扎，鍵入一個(gè)新的網(wǎng)址地址欄或關(guān)閉瀏覽器窗口祟峦。這一事件也引發(fā)了頁(yè)面刷新。請(qǐng)注意徙鱼，使用preventdefault()不會(huì)取消卸載事件宅楞。此外针姿，電話alert()，confirm()和prompt()會(huì)被大多數(shù)瀏覽器這個(gè)事件處理程序內(nèi)的忽略厌衙，意味著下面的代碼不會(huì)工作：
自從版本1.8后無(wú)論是load（）還是unload()都被棄用距淫。
2 準(zhǔn)備活動(dòng)
在大多數(shù)情況下，沒有必要為所有的元素婶希，如圖像加載前一個(gè)腳本可以運(yùn)行沒有任何問題榕暇。你需要確保的是，DOM層次結(jié)構(gòu)已經(jīng)完全構(gòu)造喻杈。準(zhǔn)備活動(dòng)需要照顧這個(gè)為您彤枢。任何處理程序附加到該事件是只運(yùn)行后的DOM就緒。在處理程序可以運(yùn)行你的jQuery代碼或附加事件處理程序的其他元素沒有任何煩惱奕塑。
在荷載作用下的高分辨率圖像CodePen演示堂污。你會(huì)注意到DOM就緒之前加載圖像完全家肯。
如果你的代碼依賴于一些CSS樣式屬性的值龄砰，你應(yīng)該先到相應(yīng)的樣式表提供參考或嵌入式方式運(yùn)行它之前。
3 鍵盤事件
鍵盤事件觸發(fā)可以通過任何用戶和鍵盤交互讨衣。每一個(gè)這樣的事件將有關(guān)于按鍵和事件類型的信息换棚。這三個(gè)鍵盤快捷方式在jQuery -中是keydown(), keyup() and keypress().
the keyup and keydown事件
正如名字所暗示的，KeyUp開火當(dāng)用戶釋放鍵盤和keydown的關(guān)鍵是發(fā)射時(shí)反镇，用戶按下鍵盤上的鍵固蚤。這兩個(gè)事件的處理程序都可以連接到任何元素，但只有在當(dāng)前有焦點(diǎn)的元素上的處理程序才被觸發(fā)歹茶。
建議使用該事件對(duì)象的屬性來(lái)確定被按下的鍵夕玩。這是因?yàn)闉g覽器使用不同的屬性來(lái)存儲(chǔ)這些信息并將其財(cái)產(chǎn)jQuery可靠地檢索此信息。
更值得一提的是惊豺，這兩個(gè)事件在后一種情況下都沒有區(qū)別燎孟，兩個(gè)移動(dòng)和一個(gè)分別是單獨(dú)注冊(cè)的。在下面的代碼中尸昧，目前的用戶一個(gè)警告框揩页，其中登記任何KeyDown事件。當(dāng)Y鍵被按下烹俗，一個(gè)特定的元素從DOM爆侣。
按鍵事件
這一事件就像KeyDown事件。一個(gè)主要的區(qū)別是幢妄，改性劑和非打印鍵像shift兔仰，ESC等不火KeyPress事件。我不能強(qiáng)調(diào)這一點(diǎn)時(shí)蕉鸳，我說斋陪，你不應(yīng)該使用KeyPress事件捕捉特殊按鍵像箭頭鍵。按鍵是用于當(dāng)你想知道它的字符輸入，A如a无虚。
下面的代碼片斷隱藏單元根據(jù)按鍵：
鼠標(biāo)事件
當(dāng)用戶使用指向設(shè)備如鼠標(biāo)時(shí)進(jìn)行交互時(shí)缔赠，鼠標(biāo)事件被觸發(fā)。事件可以根據(jù)點(diǎn)擊喜歡單擊友题，雙擊和右鍵菜單或運(yùn)動(dòng)嗤堰，像MouseEnter、MouseLeave和MouseMove度宦。在這一節(jié)中我將討論所有這些簡(jiǎn)單的包括一些演示來(lái)說明它們之間的細(xì)微差別踢匣。
基于點(diǎn)擊事件
有五個(gè)點(diǎn)擊基于事件的方法定義在jQuery。MouseDown和MouseUp事件戈抄，明顯的名字离唬，被解雇，當(dāng)用戶按下并釋放鼠標(biāo)按鈕元素上分別划鸽。另一方面输莺，只有當(dāng)鼠標(biāo)按鈕被按下并釋放到指定的元素后，單擊事件才被觸發(fā)裸诽。
雙擊要稍微復(fù)雜一些嫂用。一個(gè)事件被登記為雙擊應(yīng)該有兩個(gè)快速鼠標(biāo)點(diǎn)擊某一系統(tǒng)相關(guān)的時(shí)間間隔到期之前。你不應(yīng)該把處理單元為單擊和雙擊的事件同時(shí)觸發(fā)雙擊特定瀏覽器丈冬。一些瀏覽器可能注冊(cè)2個(gè)單點(diǎn)的點(diǎn)擊事件之前嘱函，雙擊一個(gè)，而其他人可能只注冊(cè)一個(gè)點(diǎn)擊事件之前埂蕊，雙擊往弓。
ContextMenu事件后一個(gè)元素的右鍵單擊只是在顯示上下文菜單了。這意味著你可以在事件處理程序中使用適當(dāng)?shù)拇a來(lái)阻止默認(rèn)的上下文菜單蓄氧。
下面的代碼段防止默認(rèn)的上下文菜單顯示在右擊顯示自定義菜單代替：
這個(gè)演示應(yīng)用CSS樣式的圖像時(shí)函似，它的點(diǎn)擊，并有一個(gè)自定義的上下文菜單：
基于運(yùn)動(dòng)的事件
有些事件是基于鼠標(biāo)指針的移動(dòng)匀们，或者是在元素的移動(dòng)中缴淋。有六個(gè)基于運(yùn)動(dòng)的事件方法。
讓我們用鼠標(biāo)懸停和MouseEnter事件開始泄朴。當(dāng)鼠標(biāo)指針進(jìn)入一個(gè)元素時(shí)重抖，這個(gè)名字就說明了這兩個(gè)事件的發(fā)生。同樣祖灰，MouseLeave和mouseout事件火當(dāng)鼠標(biāo)指針離開元素钟沛。
MouseLeave和mouseout的一個(gè)區(qū)別是，前者是僅當(dāng)鼠標(biāo)指針移動(dòng)一個(gè)元素勢(shì)必外發(fā)射局扶。另一方面恨统，mouseout觸發(fā)甚至以外的任何后代元素的運(yùn)動(dòng)叁扫。MouseEnter和mouseover之間存在同樣的差異。
讓我們來(lái)看看在如何MouseEnter和mouseover事件變化基于鼠標(biāo)動(dòng)作的統(tǒng)計(jì)看畜埋。試著從右邊進(jìn)入大藍(lán)方塊莫绣，然后在進(jìn)入右邊的粉紅色框之前停止。兩MouseEnter和mouseover現(xiàn)在應(yīng)該有值1悠鞍。如果你向左移動(dòng)并進(jìn)入粉紅色的盒子对室，mouseover計(jì)數(shù)的變化兩。這是因?yàn)槭录芭莸膍ouseover事件咖祭。在粉紅色的盒子“泡沫”到外藍(lán)箱的mouseover事件掩宜，由1增加themouseover事件計(jì)數(shù)。當(dāng)你再離開和停止的粉色盒子之間么翰，mouseover事件再次開火的時(shí)候牺汤，你到達(dá)藍(lán)箱左端的mouseover事件計(jì)數(shù)應(yīng)該是5和計(jì)數(shù)MouseEnter事件仍然應(yīng)該是1。
同樣的概念也適用于解釋MouseLeave和mouseout事件計(jì)數(shù)浩嫌。試著在不同方向移動(dòng)檐迟，看看計(jì)數(shù)的變化。
事件MouseMove和懸停
MouseMove事件被觸發(fā)時(shí)固该，鼠標(biāo)指針移動(dòng)一個(gè)元素內(nèi)锅减。它觸發(fā)了鼠標(biāo)移動(dòng)糖儡，即使它是一個(gè)像素的小伐坏。因此，數(shù)以百計(jì)的事件可以在一個(gè)小的時(shí)間被解雇握联。你可以想象桦沉，在事件處理程序中執(zhí)行復(fù)雜的操作會(huì)導(dǎo)致瀏覽器延遲。明智的做法是讓MouseMove事件處理程序盡可能高效金闽，解開它時(shí)纯露，它不再需要。
只有當(dāng)鼠標(biāo)指針進(jìn)入或離開該元素時(shí)代芜，才觸發(fā)鼠標(biāo)懸停狀態(tài)埠褪。有2種方法調(diào)用懸停方法。第一個(gè)是：
在這里挤庇，handlerin()執(zhí)行當(dāng)鼠標(biāo)指針進(jìn)入元和handlerout()當(dāng)鼠標(biāo)指針離開它钞速。二是：
這一次同樣的handlerinout功能是對(duì)進(jìn)入和離開的元素執(zhí)行。
注：此演示使用CSS濾鏡效果嫡秕，這是不支持的IE瀏覽器渴语。
活動(dòng)形式
表格在網(wǎng)上隨處可見。幾乎每一個(gè)用戶在某個(gè)點(diǎn)上填寫一個(gè)表格昆咽。jQuery有特殊方法專門處理事件的方式驾凶。這些事件可以觸發(fā)一個(gè)值的變化或損失的焦點(diǎn)牙甫。有七種形式的事件，我們將逐一討論他們调违。
模糊窟哺，焦點(diǎn)，焦點(diǎn)和focusout事件
focus事件被觸發(fā)時(shí)技肩，當(dāng)元素獲得焦點(diǎn)脏答。它僅適用于組成元素和錨標(biāo)簽。觸發(fā)其它任何元素亩鬼，你需要設(shè)置元素的屬性的作用重點(diǎn)殖告。但是，設(shè)置集中在隱藏元素將導(dǎo)致一個(gè)錯(cuò)誤在互聯(lián)網(wǎng)瀏覽器雳锋。如果你有觸發(fā)焦點(diǎn)事件沒有設(shè)置重點(diǎn)明確黄绩，你可以使用triggerhandler（“focus”）的方法。
當(dāng)元素失去焦點(diǎn)時(shí)玷过，就觸發(fā)了模糊事件爽丹。在較舊的瀏覽器中，此事件僅適用于表單元素辛蚊。
不同的焦點(diǎn)事件粤蝎，焦點(diǎn)是解雇任何元素或其后代獲得焦點(diǎn)。同樣袋马，focusout解雇任何元素或其后代失去焦點(diǎn)初澎。所以，如果你想讓事件發(fā)生虑凛，你應(yīng)該用這2個(gè)事件來(lái)代替碑宴。
The Select, Change and Submit 事件
當(dāng)元素改變值時(shí)，該更改事件被觸發(fā)桑谍。此事件僅適用于 <input>, <textarea> 和 <select>元素延柠。在復(fù)選框，單選按鈕锣披，選擇框贞间，這個(gè)事件被當(dāng)用戶作出選擇。在其他元素上雹仿，它只能在元素失去焦點(diǎn)后觸發(fā)增热。還注意到，這一事件不會(huì)是如果一個(gè)輸入元素的值被改變使用JavaScript觸發(fā)盅粪。
當(dāng)用戶在元素中進(jìn)行文本選擇時(shí)钓葫，會(huì)觸發(fā)選擇事件。這一事件更多的范圍有限票顾，只適用于 <input type="text">和<textarea>元素础浮。如果你想檢索選定文本帆调，你可以使用一個(gè)跨瀏覽器的插件。
當(dāng)用戶試圖提交表單時(shí)豆同，submit事件被觸發(fā)番刊。你只能附加處理程序以形成元素。為觸發(fā)這個(gè)事件影锈，用戶必須點(diǎn)擊<input type="submit">,<button type="submit"> 或 <input type="image">芹务。有趣的是，JavaScript submit事件不在Internet Explorer鸭廷。然而枣抱，這種行為已經(jīng)常態(tài)化的跨瀏覽器在jQuery 1.4版本。
在jQuery 3的變化
負(fù)載誤差和卸載方法已被否決因?yàn)閖Query 1.8版本辆床。load()方法在本質(zhì)上是不明確的佳晶。這種方法可以是一個(gè)AJAX加載或加載事件的實(shí)際射擊。同樣的讼载， error的方法也可以用 jQuery.error() 方法混淆〗窝恚現(xiàn)在在jQuery 3，這些方法已經(jīng)被刪除∽傻蹋現(xiàn)在菇篡，您將要使用的方法來(lái)注冊(cè)這些事件偵聽器。
留在最后的思考
在這篇文章中一喘，我已經(jīng)把所有主要的jQuery事件方法隨著相似事件之間的差異驱还。知道何時(shí)使用 keypress 代替 keydown可以幫助你避免麻煩，節(jié)省寶貴的時(shí)間津滞。盡管能夠鉤到DOM事件與普通的JavaScript铝侵、jQuery是引擎蓋下做一些規(guī)范化的跨瀏覽器的差異灼伤，這可能是一個(gè)優(yōu)勢(shì)触徐，這取決于你的網(wǎng)站/應(yīng)用程序的瀏覽器支持。
