JQuery中的常用事件、對(duì)象屬性與使用方法分析
本文實(shí)例講述了JQuery中的常用事件、對(duì)象屬性與使用方法。分享給大家供大家參考,具體如下:
JQuery中的常用事件
.click() |
鼠標(biāo)單擊觸發(fā)事件,參數(shù)可選(data,function) |
.dblclick() |
雙擊觸發(fā),同上 |
.mousedown()/up() |
鼠標(biāo)按下/彈起觸發(fā)事件 |
.mousemove() |
鼠標(biāo)移動(dòng)事件 |
.mouseover()/out() |
鼠標(biāo)移入/移出觸發(fā)事件 |
.mouseenter()/leave() |
鼠標(biāo)進(jìn)入/離開觸發(fā)事件* |
.hover(func1,func2) |
鼠標(biāo)移入調(diào)用func1函數(shù),移出調(diào)用func2函數(shù) |
.focusin() |
鼠標(biāo)聚焦到該元素時(shí)觸發(fā)事件 |
.focusout() |
鼠標(biāo)失去焦點(diǎn)時(shí)觸發(fā)事件 |
. focus()/.blur() |
鼠標(biāo)聚焦/失去焦點(diǎn)觸發(fā)事件(不支持冒泡) |
.change() |
表單元素發(fā)生改變時(shí)觸發(fā)事件 |
.select() |
文本元素被選中時(shí)觸發(fā)事件 |
.submit() |
表單提交動(dòng)作觸發(fā)* |
.keydown()/up() |
鍵盤按鍵按下/彈起觸發(fā) |
.on() |
多事件的綁定 |
.off() |
移除事件的綁定 |
.trigger(“event”) |
觸發(fā)事件event調(diào)用 |
.triggerHandler() |
觸發(fā)事件,不會(huì)冒泡,不會(huì)觸發(fā)默認(rèn)事件 |
注:
1、以上事件函數(shù)有三種用法:
//直接綁定事件到元素上 $('.target1').keydown(function(e) { $("em:first").text(e.target.value) //通過對(duì)象e獲取輸入的值 });
//傳遞參數(shù)調(diào)用函數(shù)處理 $("#test").click(11111,function(e) { //this指向 div元素 //e.data => 11111 通過e傳遞參數(shù)數(shù)據(jù) });
//手動(dòng)觸發(fā)已綁定的點(diǎn)擊事件 $elem.click()
2、mouseover與mouseenter區(qū)別:不論鼠標(biāo)指針穿過被選元素或其子元素,都會(huì)觸發(fā) mouseover 事件,稱作支持冒泡處理,冒泡處理指子元素與父元素共同定義的事件,在觸發(fā)子元素時(shí),或者沒有定義子元素,事件就會(huì)向父級(jí)傳播,引發(fā)父級(jí)事件觸發(fā)。只有在鼠標(biāo)指針穿過被選元素時(shí),才會(huì)觸發(fā) mouseenter 事件。
3、form元素是有默認(rèn)提交表單的行為,如果通過submit處理的話,需要禁止瀏覽器的這個(gè)默認(rèn)行為。傳統(tǒng)的方式是調(diào)用事件對(duì)象 e.preventDefault() 來處理, jQuery中可以直接在函數(shù)中最后結(jié)尾return false即可。
//回車鍵或者點(diǎn)擊提交表單后禁止瀏覽器默認(rèn)跳轉(zhuǎn): $('#target2').submit(function() { alert('捕獲提交表達(dá)動(dòng)作,阻止頁面跳轉(zhuǎn)') return false; });
4、on()使用
基本用法:.on( events ,[ selector ] ,[ data ] )
最常見的給元素綁定一個(gè)點(diǎn)擊事件,對(duì)比一下快捷方式與on方式的不同
$("#elem").click(function(){}) //快捷方式 $("#elem").on('click',function(){}) //on方式
//多個(gè)事件綁定同一個(gè)函數(shù),通過空格分離,傳遞不同的事件名,可以同時(shí)綁定多個(gè)事件 $("#elem").on("mouseover mouseout",function(){ });
//多個(gè)事件綁定不同函數(shù) $("#elem").on({ mouseover:function(){}, mouseout:function(){} });
//將數(shù)據(jù)傳遞到處理程序 $( "button" ).on( "click", { //第二個(gè)參數(shù)傳遞數(shù)據(jù)給函數(shù)調(diào)用 name: "Mr.Tory" }, greet ); function greet( event ) { alert( "Hello " + event.data.name ); //輸出Hello Mr.Tory }
事件對(duì)象的屬性與方法
.type |
事件類型.如果使用一個(gè)事件處理函數(shù)來處理多個(gè)事件, 可以使用此屬性獲得事件類型,比如click |
.data |
事件調(diào)用時(shí)傳入額外參數(shù) |
.target |
觸發(fā)該事件的 DOM 元素 |
.which |
指示按了哪個(gè)鍵或按鈕 |
.timeStamp |
該屬性返回從 1970 年 1 月 1 日到事件發(fā)生時(shí)的毫秒數(shù) |
.pageX/Y |
相對(duì)于文檔左/上邊緣的鼠標(biāo)位置 |
.result |
上一個(gè)相同事件處理器函數(shù)返回的值 |
.preventDefalut() |
阻止事件的默認(rèn)動(dòng)作 |
.stopPropagation() |
取消事件冒泡 |
$("#content").click(function(event) { $("#msg").html("<p>外層div元素被單擊</p>"); event.stopPropagation(); //通過event方法阻止事件冒泡 });
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具 http://tools.jb51.net/code/HtmlJsRun 測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
上一篇:javascript實(shí)現(xiàn)fetch請(qǐng)求返回的統(tǒng)一攔截
欄 目:JavaScript
下一篇:vue圖片上傳組件使用詳解
本文標(biāo)題:JQuery中的常用事件、對(duì)象屬性與使用方法分析
本文地址:http://mengdiqiu.com.cn/a1/JavaScript/9429.html
您可能感興趣的文章
- 01-105分鐘快速看懂ES6中的反射與代理
- 01-10jquery實(shí)現(xiàn)商品sku多屬性選擇功能(商品詳情頁)
- 01-10ES6常用小技巧總結(jié)【去重、交換、合并、反轉(zhuǎn)、迭代、計(jì)算等】
- 01-10JavaScript中的相等操作符使用詳解
- 01-10JQuery常用選擇器功能與用法實(shí)例分析
- 01-10javascript中的相等操作符(==與===區(qū)別)
- 01-10判斷JavaScript中的兩個(gè)變量是否相等的操作符
- 01-10JQuery中DOM節(jié)點(diǎn)的操作與訪問方法實(shí)例分析
- 01-10Jquery屬性的獲取/設(shè)置及樣式添加/刪除操作技巧分析
- 01-10繼承行為在 ES5 與 ES6 中的區(qū)別詳解


閱讀排行
- 1C語言 while語句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹的示例代碼(圣誕
- 3利用C語言實(shí)現(xiàn)“百馬百擔(dān)”問題方法
- 4C語言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 04-02javascript點(diǎn)線,點(diǎn)線的代碼
- 04-02javascript潛力,javascript強(qiáng)大嗎
- 04-02javascript替換字符串,js字符串的替換
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的詞條
- 04-02javascript并行,深入理解并行編程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警報(bào),JavaScript警告
- 04-02javascript遮蓋,JavaScript遮蓋PC端頁面
- 04-02javascript前身,javascript的前身
隨機(jī)閱讀
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 01-11ajax實(shí)現(xiàn)頁面的局部加載
- 01-10delphi制作wav文件的方法
- 01-10使用C語言求解撲克牌的順子及n個(gè)骰子
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 04-02jquery與jsp,用jquery
- 01-10C#中split用法實(shí)例總結(jié)
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置