JQuery中的常用事件、對象屬性與使用方法分析
本文實例講述了JQuery中的常用事件、對象屬性與使用方法。分享給大家供大家參考,具體如下:
JQuery中的常用事件
.click() |
鼠標單擊觸發(fā)事件,參數(shù)可選(data,function) |
.dblclick() |
雙擊觸發(fā),同上 |
.mousedown()/up() |
鼠標按下/彈起觸發(fā)事件 |
.mousemove() |
鼠標移動事件 |
.mouseover()/out() |
鼠標移入/移出觸發(fā)事件 |
.mouseenter()/leave() |
鼠標進入/離開觸發(fā)事件* |
.hover(func1,func2) |
鼠標移入調(diào)用func1函數(shù),移出調(diào)用func2函數(shù) |
.focusin() |
鼠標聚焦到該元素時觸發(fā)事件 |
.focusout() |
鼠標失去焦點時觸發(fā)事件 |
. focus()/.blur() |
鼠標聚焦/失去焦點觸發(fā)事件(不支持冒泡) |
.change() |
表單元素發(fā)生改變時觸發(fā)事件 |
.select() |
文本元素被選中時觸發(fā)事件 |
.submit() |
表單提交動作觸發(fā)* |
.keydown()/up() |
鍵盤按鍵按下/彈起觸發(fā) |
.on() |
多事件的綁定 |
.off() |
移除事件的綁定 |
.trigger(“event”) |
觸發(fā)事件event調(diào)用 |
.triggerHandler() |
觸發(fā)事件,不會冒泡,不會觸發(fā)默認事件 |
注:
1、以上事件函數(shù)有三種用法:
//直接綁定事件到元素上 $('.target1').keydown(function(e) { $("em:first").text(e.target.value) //通過對象e獲取輸入的值 });
//傳遞參數(shù)調(diào)用函數(shù)處理 $("#test").click(11111,function(e) { //this指向 div元素 //e.data => 11111 通過e傳遞參數(shù)數(shù)據(jù) });
//手動觸發(fā)已綁定的點擊事件 $elem.click()
2、mouseover與mouseenter區(qū)別:不論鼠標指針穿過被選元素或其子元素,都會觸發(fā) mouseover 事件,稱作支持冒泡處理,冒泡處理指子元素與父元素共同定義的事件,在觸發(fā)子元素時,或者沒有定義子元素,事件就會向父級傳播,引發(fā)父級事件觸發(fā)。只有在鼠標指針穿過被選元素時,才會觸發(fā) mouseenter 事件。
3、form元素是有默認提交表單的行為,如果通過submit處理的話,需要禁止瀏覽器的這個默認行為。傳統(tǒng)的方式是調(diào)用事件對象 e.preventDefault() 來處理, jQuery中可以直接在函數(shù)中最后結(jié)尾return false即可。
//回車鍵或者點擊提交表單后禁止瀏覽器默認跳轉(zhuǎn): $('#target2').submit(function() { alert('捕獲提交表達動作,阻止頁面跳轉(zhuǎn)') return false; });
4、on()使用
基本用法:.on( events ,[ selector ] ,[ data ] )
最常見的給元素綁定一個點擊事件,對比一下快捷方式與on方式的不同
$("#elem").click(function(){}) //快捷方式 $("#elem").on('click',function(){}) //on方式
//多個事件綁定同一個函數(shù),通過空格分離,傳遞不同的事件名,可以同時綁定多個事件 $("#elem").on("mouseover mouseout",function(){ });
//多個事件綁定不同函數(shù) $("#elem").on({ mouseover:function(){}, mouseout:function(){} });
//將數(shù)據(jù)傳遞到處理程序 $( "button" ).on( "click", { //第二個參數(shù)傳遞數(shù)據(jù)給函數(shù)調(diào)用 name: "Mr.Tory" }, greet ); function greet( event ) { alert( "Hello " + event.data.name ); //輸出Hello Mr.Tory }
事件對象的屬性與方法
.type |
事件類型.如果使用一個事件處理函數(shù)來處理多個事件, 可以使用此屬性獲得事件類型,比如click |
.data |
事件調(diào)用時傳入額外參數(shù) |
.target |
觸發(fā)該事件的 DOM 元素 |
.which |
指示按了哪個鍵或按鈕 |
.timeStamp |
該屬性返回從 1970 年 1 月 1 日到事件發(fā)生時的毫秒數(shù) |
.pageX/Y |
相對于文檔左/上邊緣的鼠標位置 |
.result |
上一個相同事件處理器函數(shù)返回的值 |
.preventDefalut() |
阻止事件的默認動作 |
.stopPropagation() |
取消事件冒泡 |
$("#content").click(function(event) { $("#msg").html("<p>外層div元素被單擊</p>"); event.stopPropagation(); //通過event方法阻止事件冒泡 });
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具 http://tools.jb51.net/code/HtmlJsRun 測試上述代碼運行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- jQuery獲取樣式中的背景顏色屬性值/顏色值
- 如何使用jquery修改css中帶有!important的樣式屬性
- 從零開始學(xué)習(xí)jQuery (四) jQuery中操作元素的屬性與樣式
- jQuery修改class屬性和CSS樣式整理
- 基于jquery animate操作css樣式屬性小結(jié)
- jQuery 添加樣式屬性的優(yōu)先級別方法(推薦)
- jQuery操作屬性和樣式詳解
- JQuery樣式與屬性設(shè)置方法分析
- 詳解jQuery設(shè)置內(nèi)容和屬性
- jquery獲取自定義屬性(attr和prop)實例介紹
- Jquery屬性的獲取/設(shè)置及樣式添加/刪除操作技巧分析
相關(guān)文章
jQuery中text() val()和html()的區(qū)別實例詳解
這篇文章主要介紹了jQuery中text() val()和html()的區(qū)別實例詳解的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-06jquery實現(xiàn)漂浮在網(wǎng)頁右側(cè)的qq在線客服插件示例
很實用的一款QQ在線客服代碼,點擊QQ圖標,可直接與客服對話,詳細如下,感興趣的朋友可以參考下哈,希望對你有所幫助2013-05-05jQuery實現(xiàn)base64前臺加密解密功能詳解
這篇文章主要介紹了jQuery實現(xiàn)base64前臺加密解密功能,結(jié)合實例形式分析了jquery.base64.js實現(xiàn)前臺base64加密與解密功能的實現(xiàn)方法,并給出了java實現(xiàn)后臺base64加密解密的操作示例對比驗證加密效果,需要的朋友可以參考下2017-08-08jQuery解決下拉框select設(shè)寬度時IE 6/7/8下option超出顯示不全
jQuery解決IE 6/7/8 BUG:下拉框select設(shè)寬度時option超出顯示不全,經(jīng)過修改效果還不錯,遇到類似情況的朋友可以參考下哈2013-05-05jQuery validate插件submitHandler提交導(dǎo)致死循環(huán)解決方法
這篇文章主要介紹了jQuery validate插件submitHandler提交導(dǎo)致死循環(huán)解決方法,對比分析了常見的錯誤寫法造成死循環(huán)與正確寫法,需要的朋友可以參考下2016-01-01