jQuery 鼠標(biāo)事件 click與dbclick事件
用交互操作中,最簡單直接的操作就是點擊操作。jQuery提供了兩個方法一個是click方法用于監(jiān)聽用戶單擊操作,另一個方法是dbclick方法用于監(jiān)聽用戶雙擊操作。這兩個方法的用法是類似的,下面以click()事件為例
方法一:$ele.click()
綁定$ele元素,不帶任何參數(shù)一般是用來指定觸發(fā)一個事件,用的比較少
點擊觸發(fā)$("ele").click(function(){ alert("觸發(fā)指定事件") }) $("#test").click(function(){ $("ele").click() //手動指定觸發(fā)事件 });方法二:$ele.click( handler(eventObject) )
綁定$ele元素,每次$ele元素觸發(fā)點擊操作會執(zhí)行回調(diào) handler函數(shù),這樣可以針對事件的反饋做很多操作了,方法中的this是指向了綁定事件的元素
點擊觸發(fā)$("#test").click(function() { // this指向div元素 });方法三:$ele.click( [eventData ], handler(eventObject) )
使用與方法二一致,不過可以接受一個數(shù)據(jù)參數(shù),這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題
點擊觸發(fā)$("#test").click(11111,function(e) { //this指向div元素 //e.data => 11111 傳遞數(shù)據(jù) });dblclick()的用法和click()的用法是類似的,可以參考以上click()的用法。
dbclick與click事件的不同click事件觸發(fā)需要以下幾點:
click事件其實是由mousedown與mouseup 2個動作構(gòu)成,所以點擊的動作只有在松手后才觸發(fā)
dblclick事件觸發(fā)需要以下幾點:
dblclick又是由2個click疊加而來的,所以dblclick事件只有在滿足以下條件的情況下才能被觸發(fā)
鼠標(biāo)指針在元素里面時點擊
鼠標(biāo)指針在元素里面時釋放
鼠標(biāo)指針在元素里面時再次點擊,點擊間隔時間,是系統(tǒng)而定
鼠標(biāo)指針在元素里面時再次釋放
注意
mousedown與mouseup事件
在同一元素上同時綁定 click 和 dblclick 事件是不可取的。各個瀏覽器事件觸發(fā)的順序是不同的,一些瀏覽器在dblclick之前接受兩個 click 事件 ,而一些瀏覽器只接受一個 click 事件。用戶往往可通過不同的操作系統(tǒng)和瀏覽器配置雙擊靈敏度jQuery提供了一個mousedown的快捷方法可以監(jiān)聽用戶鼠標(biāo)按下的操作,與其對應(yīng)的還有一個方法mouseup快捷方法可以監(jiān)聽用戶鼠標(biāo)彈起的操作。兩種方法用法類似,下面以mousedown()為例
方法一:$ele.mousedown()
綁定$ele元素,不帶任何參數(shù)一般是用來指定觸發(fā)一個事件,一般用的比較少
點擊觸發(fā)$("ele").mousedown(function(){ alert("觸發(fā)指定事件") }) $("#test").mousedown(function(){ $("ele").mousedown() //手動指定觸發(fā)事件 });方法二:$ele.mousedown( handler(eventObject) )
綁定$ele元素,每次$ele元素觸發(fā)點擊操作會執(zhí)行回調(diào) handler函數(shù),可以針對事件的反饋做很多操作
點擊觸發(fā)$("#test").mousedown(function() { //this指向 div元素 });方法三:$ele.mousedown( [eventData ], handler(eventObject) )
使用與方法二一致,不過可以接受一個數(shù)據(jù)參數(shù),這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題
點擊觸發(fā)$("#test").mousedown(11111,function(e) { //this指向 div元素 //e.data => 11111 傳遞數(shù)據(jù) });mousedown事件觸發(fā)需要需要:
mousedown強調(diào)是按下觸發(fā)
如果在一個元素按住了鼠標(biāo)不放,并且拖動鼠標(biāo)離開這個元素,并釋放鼠標(biāo)鍵,這仍然是算作mousedown事件
任何鼠標(biāo)按鈕被按下時都能觸發(fā)mousedown事件
用event 對象的which區(qū)別按鍵,敲擊鼠標(biāo)左鍵which的值是1,敲擊鼠標(biāo)中鍵which的值是2,敲擊鼠標(biāo)右鍵which的值是3
mouseup事件觸發(fā)需要:
mouseup強調(diào)是松手觸發(fā),與mousedown是相反的
mouseup與mousedown組合起來就是click事件
如果用戶在一個元素上按下鼠標(biāo)按鍵,并且拖動鼠標(biāo)離開這個元素,然后釋放鼠標(biāo)鍵,這仍然是算作mouseup事件
任何鼠標(biāo)按鈕松手時都能觸發(fā)mouseup事件
用event 對象的which區(qū)別按鍵,敲擊鼠標(biāo)左鍵which的值是1,敲擊鼠標(biāo)中鍵which的值是2,敲擊鼠標(biāo)右鍵which的值是3
click與mousedown的區(qū)別click事件其實是由mousedown于mouseup 2個動作構(gòu)成,所以點擊的動作只有在松手后才觸發(fā)
mousemove事件用交互操作中,經(jīng)常需要知道用戶是否有移動的操作。基于移動的機制可以做出拖動、拖拽一系列的效果出來。針對移動事件,jQuery提供了一個mousemove的快捷方法可以監(jiān)聽用戶移動的的操作
方法一:$ele.mousemove()
綁定$ele元素,不帶任何參數(shù)一般是用來指定觸發(fā)一個事件,用的比較少
點擊觸發(fā)$("ele").mousemove(function(){ alert("觸發(fā)指定事件") }) $("#test").click(function(){ $("ele").mousemove() //指定觸發(fā)事件 });方法二:$ele.mousemove( handler(eventObject) )
綁定$ele元素,每次$ele元素觸發(fā)點擊操作會執(zhí)行回調(diào) handler函數(shù),這樣可以針對事件的反饋做很多操作
滑動觸發(fā)$("#test").mousemove(function() { // this指向 div元素 });方法三:$ele.mousemove( [eventData ], handler(eventObject) )
使用與方法二一致,不過可以接受一個數(shù)據(jù)參數(shù),這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題
點擊觸發(fā)$("#test").mousemove(11111,function(e) { //this指向 div元素 //e.data => 11111 傳遞數(shù)據(jù) });mousemove事件觸發(fā)需要:
mousemove事件是當(dāng)鼠標(biāo)指針移動時觸發(fā)的,即使是一個像素
如果處理器做任何重大的處理,或者如果該事件存在多個處理函數(shù),這可能造成瀏覽器的嚴(yán)重的性能問題
mouseover與mouseout事件jQuery提供了mouseover()與mouseout()事件來監(jiān)聽用戶的移入移出操作,兩者用法類似,下面一mouseover為例
方法一:$ele.mouseover()
綁定$ele元素,不帶任何參數(shù)一般是用來指定觸發(fā)一個事件,用的比較少
點擊觸發(fā)$("ele").mouseover(function(){ alert("觸發(fā)指定事件") }) $("#test").click(function(){ $("ele").mouseover() //指定觸發(fā)事件 });方法二:$ele.mouseover( handler(eventObject) )
綁定$ele元素,每次$ele元素觸發(fā)點擊操作會執(zhí)行回調(diào) handler函數(shù),這樣可以針對事件的反饋做很多操作
滑動觸發(fā)$("#test").mouseover(function() { //this指向 div元素 });方法三:$ele.mouseover( [eventData ], handler(eventObject) )
使用與方法二一致,不過可以接受一個數(shù)據(jù)參數(shù),這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題
點擊觸發(fā)$("#test").mouseover(11111,function(e) { //this指向 div元素 //e.data => 11111 傳遞數(shù)據(jù) }); mouseenter與mouseleave事件用交互操作中,經(jīng)常需要知道用戶操作鼠標(biāo)是否有移到元素內(nèi)部或是元素外部,因此jQuery提供了一個mouseenter和mouseleave的快捷方法可以監(jiān)聽用戶移動到內(nèi)部的操作
使用上非常簡單,三種參數(shù)傳遞方式與mouseover和mouseout是一模一樣的,所以這里不再重復(fù),主要講講區(qū)別,下面以mouseenter為例:
mouseenter JavaScript事件是Internet Explorer專有的。由于該事件在平時很有用,jQuery的模擬這一事件,以便它可用于所有瀏覽器。該事件在鼠標(biāo)移入到元素上時被觸發(fā)。任何HTML元素都可以接受此事件
mouseenter事件和mouseover的區(qū)別關(guān)鍵點就是:冒泡的方式處理問題mouseover為例:
鼠標(biāo)離開此區(qū)域觸發(fā)mouseleave事件
如果在p元素與div元素都綁定mouseover事件,鼠標(biāo)在離開p元素,但是沒有離開div元素的時候,觸發(fā)的結(jié)果:
p元素響應(yīng)事件
div元素響應(yīng)事件
這里的問題是div為什么會被觸發(fā)? 原因就是事件冒泡的問題,p元素觸發(fā)了mouseover,他會一直往上找父元素上的mouseover事件,如果父元素有mouseover事件就會被觸發(fā)
所以在這種情況下面,jQuery推薦我們使用 mouseenter事件
mouseenter事件只會在綁定它的元素上被調(diào)用,而不會在后代節(jié)點上被觸發(fā)hover事件在元素上移進(jìn)移出切換其換色,一般通過2個事件配合就可以達(dá)到,這里用mouseenter與mouseleave,這樣可以避免冒泡問題
$(ele).mouseenter(function(){ $(this).css("background", "#bbffaa"); }) $(ele).mouseleave(function(){ $(this).css("background", "red"); })hover方法中只需傳遞2個回調(diào)函數(shù)即可,不需要顯示的綁定2個事件
$(selector).hover(handlerIn, handlerOut)handlerIn(eventObject):當(dāng)鼠標(biāo)指針進(jìn)入元素時觸發(fā)執(zhí)行的事件函數(shù)
handlerOut(eventObject):當(dāng)鼠標(biāo)指針離開元素時觸發(fā)執(zhí)行的事件函數(shù)
focusin事件當(dāng)一個元素,或者其內(nèi)部任何一個元素獲得焦點的時候,例如:input元素,用戶在點擊聚焦的時候,如果開發(fā)者需要捕獲這個動作的時候,jQuery提供了一個focusin事件
方法一:$ele.focusin()
綁定$ele元素,不帶任何參數(shù)一般是用來指定觸發(fā)一個事件,一般用的比較少
點擊觸發(fā)$("ele").focusin(function(){ alert("觸發(fā)指定事件") }) $("#test").mouseup(function(){ $("ele").focusin() //指定觸發(fā)事件 });方法二:$ele.focusin( handler )
綁定$ele元素,每次$ele元素觸發(fā)點擊操作會執(zhí)行回調(diào) handler函數(shù),這樣可以針對事件的反饋做很多操作
點擊觸發(fā)$("#test").focusin(function() { //this指向 div元素 });方法三:$ele.focusin( [eventData ], handler )
使用與方法二一致,不過可以接受一個數(shù)據(jù)參數(shù),這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題
點擊觸發(fā)$("#test").focusin(11111,function(e) { //this指向 div元素 //e.data => 11111 傳遞數(shù)據(jù) }); focusout事件當(dāng)一個元素,或者其內(nèi)部任何一個元素失去焦點的時候,比如input元素,用戶在點擊失去焦的時候,如果開發(fā)者需要捕獲這個動作,jQuery提供了一個focusout事件
方法一:$ele.focusout()
綁定$ele元素,不帶任何參數(shù)一般是用來指定觸發(fā)一個事件,可能一般用的比較少
點擊觸發(fā)$("ele").focusout(function(){ alert("觸發(fā)指定事件") }) $("#test").mouseup(function(){ $("ele").focusout() //指定觸發(fā)事件 });方法二:$ele.focusout( handler )
綁定$ele元素,每次$ele元素觸發(fā)點擊操作會執(zhí)行回調(diào) handler函數(shù)
這樣可以針對事件的反饋做很多操作了
點擊觸發(fā)$("#test").focusout(function() { //this指向 div元素 });方法三:$ele.focusout( [eventData ], handler )
使用與方法二一致,不過可以接受一個數(shù)據(jù)參數(shù),這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題
點擊觸發(fā)$("#test").focusout(11111,function(e) { //this指向 div元素 //e.data => 11111 傳遞數(shù)據(jù) }); jQuery 鍵盤事件 keydown()與keyup()事件鼠標(biāo)有mousedown、mouseup之類的事件,這是根據(jù)人的手勢動作分解的2個觸發(fā)行為。相對應(yīng)的鍵盤也有這類事件,將用戶行為分解成2個動作,鍵盤按下與松手,針對這樣的2種動作,jQuery分別提供了對應(yīng)keydown與keyup方法來監(jiān)聽
keydown事件
當(dāng)用戶在一個元素上第一次按下鍵盤上字母鍵的時候,就會觸發(fā)它。使用上非常簡單,與基本事件參數(shù)處理保持一致,這里使用不在重復(fù)了,列出使用的方法
//直接綁定事件 $elem.keydown( handler(eventObject) ) //傳遞參數(shù) $elem.keydown( [eventData ], handler(eventObject) ) //手動觸發(fā)已綁定的事件 $elem.keydown()keyup事件
當(dāng)用戶在一個元素上第一次松手鍵盤上的鍵的時候,就會觸發(fā)它。使用方法與keydown是一致的只是觸發(fā)的條件是方法的
注意
keydown是在鍵盤按下就會觸發(fā)
keyup是在鍵盤松手就會觸發(fā)
理論上它可以綁定到任何元素,但keydown / keyup事件只是發(fā)送到具有焦點的元素上,不同的瀏覽器中,可獲得焦點的元素略有不同,但是表單元素總是能獲取焦點,所以對于此事件類型表單元素是最合適的
keypress()事件在input元素上綁定keydown事件會發(fā)現(xiàn)一個問題:
每次獲取的內(nèi)容都是之前輸入的,當(dāng)前輸入的獲取不到keydown事件觸發(fā)在文字還沒敲進(jìn)文本框,這時如果在keydown事件中輸出文本框中的文本,得到的是觸發(fā)鍵盤事件前的文本,而keyup事件觸發(fā)時整個鍵盤事件的操作已經(jīng)完成,獲得的是觸發(fā)鍵盤事件后的文本
當(dāng)瀏覽器捕獲鍵盤輸入時,還提供了一個keypress的響應(yīng),這個跟keydown是非常相似,這里使用請參考keydown這一節(jié),具體說說不同點
keypress事件與keydown和keyup的主要區(qū)別
只能捕獲單個字符,不能捕獲組合鍵
無法響應(yīng)系統(tǒng)功能鍵(如delete,backspace)
不區(qū)分小鍵盤和主鍵盤的數(shù)字字符
KeyPress主要用來接收字母、數(shù)字等ANSI字符,而 KeyDown 和 KeyUP 事件過程可以處理任何不被 KeyPress 識別的擊鍵。諸如:功能鍵(F1-F12)、編輯鍵、定位鍵以及任何這些鍵和鍵盤換檔鍵的組合等
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/87297.html
相關(guān)文章
JQuery基礎(chǔ)修煉-事件篇
摘要:目錄第章事件介紹第章鼠標(biāo)事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對象的使用第章自定義事件與事件用交互操作中,最簡單直接就是點擊操作。提供了兩個方法一個是方法用于監(jiān)聽用戶單擊操作,另一個方法是方法用于監(jiān)聽用戶雙擊操作。 目錄 第1章 事件介紹 第2章 鼠標(biāo)事件 第3章 表單事件 第4章 鍵盤事件 第5章 事件的綁定和解綁 第6章 事件對象的使用 第7章 自定義事件 cli...
JQuery基礎(chǔ)修煉-事件篇
摘要:目錄第章事件介紹第章鼠標(biāo)事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對象的使用第章自定義事件與事件用交互操作中,最簡單直接就是點擊操作。提供了兩個方法一個是方法用于監(jiān)聽用戶單擊操作,另一個方法是方法用于監(jiān)聽用戶雙擊操作。 目錄 第1章 事件介紹 第2章 鼠標(biāo)事件 第3章 表單事件 第4章 鍵盤事件 第5章 事件的綁定和解綁 第6章 事件對象的使用 第7章 自定義事件 cli...
jQuery入門筆記之(三)事件詳解
摘要:可以傳遞三個參數(shù)表示一個或多個事件類型,比如。表示綁定到指定元素的處理函數(shù)。我們稱它為簡寫事件。必須在中,并且使用作為事件觸發(fā)元素,不然無效。和表示鼠標(biāo)移入和移出的時候觸發(fā)。按下返回按下返回和分別表示光標(biāo)激活和丟失,事件觸發(fā)時機是當(dāng)前元素。 轉(zhuǎn)自個人博客 在JavaScript 有一個非常重要的功能,就是事件驅(qū)動。如果你的網(wǎng)頁需要與用戶進(jìn)行交互的話,就不可能不用到事件。它在頁面完全加...
jQuery 方法整理
摘要:方法返回介于兩個給定元素之間的所有祖先元素。方法返回被選元素的后代元素,一路向下直到最后一個后代。方法允許您規(guī)定一個標(biāo)準(zhǔn)。方法返回不匹配標(biāo)準(zhǔn)的所有元素。 jQuery 簡介 jQuery 是一個輕量級操作 DOM 的 JS 庫,主要包含以下功能: HTML 元素選取和操作 HTML 事件函數(shù) HTML DOM 遍歷和修改 CSS 操作 JavaScript 特效和動畫 AJAX 基于...
jQuery 方法整理
摘要:方法返回介于兩個給定元素之間的所有祖先元素。方法返回被選元素的后代元素,一路向下直到最后一個后代。方法允許您規(guī)定一個標(biāo)準(zhǔn)。方法返回不匹配標(biāo)準(zhǔn)的所有元素。 jQuery 簡介 jQuery 是一個輕量級操作 DOM 的 JS 庫,主要包含以下功能: HTML 元素選取和操作 HTML 事件函數(shù) HTML DOM 遍歷和修改 CSS 操作 JavaScript 特效和動畫 AJAX 基于...
發(fā)表評論
0條評論
Gemini
男|高級講師
TA的文章
閱讀更多
IDEA 和 Eclipse 集成開發(fā)工具 配置 Java API 幫助文檔教程
閱讀 2830·2021-09-10 10:50
響應(yīng)下拉式菜單
閱讀 2192·2019-08-29 16:06
獲取元素css值
閱讀 3196·2019-08-29 11:02
接觸的第一個vue項目
閱讀 1093·2019-08-26 14:04
【每日一包0013】to-capital-case,to-constant-case,to-dot-
閱讀 2803·2019-08-26 13:24
從前后端分別學(xué)習(xí)——注冊/登錄流程1
閱讀 2301·2019-08-26 12:16
為什么都說js 里面任何對象最終都繼承了Object對象
閱讀 550·2019-08-26 10:29
每日Scrum中的3個重要問題是什么?
閱讀 3094·2019-08-23 18:33
閱讀需要支付1元查看