jQuery文本框(input textare)事件綁定方法教程
目前1.7以上,jquery?的事件綁定已經(jīng)用on替換了原來(lái)的bind,接下來(lái)為大家介紹下bind的使用方法及input textare事件,感興趣的朋友可以參考下
(1)jquery 綁定事件
目前1.7以上,jquery的事件綁定已經(jīng)用on替換了原來(lái)的bind;
區(qū)別:(個(gè)人理解)bind是一次綁定事件到每一個(gè)子節(jié)點(diǎn);on是只綁定到父節(jié)點(diǎn),然后冒泡到各個(gè)子節(jié)點(diǎn);
用法:bind
一個(gè)事件,一個(gè)方法:$(".class input").bind('click',function(e){...;e.stopPropagation;})
兩個(gè)事件,一個(gè)方法:$(".class input").bind('click mouseover',function(e){...;e.stopPropagation;})
兩個(gè)事件,兩個(gè)方法:$(".class input").bind({ click:function(e){...;e.stopPropagation;}, mouseover:function(e){...;e.stopPropagation;} })
on,可以直接替換掉bind,就是說(shuō)上述的用法都適用于on;
此外,on比bind多了兩個(gè)可選參數(shù)
on( events [, selector ] [, data ], handler(eventObject) )
selector:要綁定的元素,上面的例子可以寫(xiě)成:$(".class").bind('click','input',function(e){...;e.stopPropagation;})
(需要注意的是,有一個(gè)事件不好用,就是ie下獨(dú)有的事件:onpropertychange;
可以用:$(".class input").bind('propertychange',function(e){...;e.stopPropagation;})
沒(méi)反應(yīng):$(".class").bind('propertychange','input',function(e){...;e.stopPropagation;})
)
data:傳遞給event.data的參數(shù),$(".class").bind('click','input','123',function(e){alert(e.data/*123*/);e.stopPropagation;})
(2)input textare 事件
之前做一個(gè)文本框內(nèi)容實(shí)時(shí)變化事件觸發(fā)時(shí),用onkeyup + onchange;但onchang必須在文本框失焦后才會(huì)觸發(fā),后來(lái)發(fā)現(xiàn)可以用
(if IE) onpropertychange + else oninput 來(lái)處理。
說(shuō)明:
oninput 事件在用戶(hù)輸入、退格、刪除、剪切、粘貼及鼠標(biāo)剪切與粘貼時(shí)觸發(fā)(在 IE9&IE9+ 中可能略有區(qū)別)。
(Firefox、Chrome、IE9&IE9+ 均支持)
onpropertychange 事件在用戶(hù)輸入、退格、刪除、剪切、粘貼及鼠標(biāo)剪切與粘貼時(shí)觸發(fā)
(僅 IE 支持)。
(3)常用事件
oncut 事件在粘貼(ctrl + v)、鼠標(biāo)粘貼時(shí)觸發(fā)
onactivate 當(dāng)對(duì)象設(shè)置為活動(dòng)元素時(shí)觸發(fā)。
onafterupdate 當(dāng)成功更新數(shù)據(jù)源對(duì)象中的關(guān)聯(lián)對(duì)象后在數(shù)據(jù)綁定對(duì)象上觸發(fā)。
onbeforeactivate 對(duì)象要被設(shè)置為當(dāng)前元素前立即觸發(fā)。
onbeforecut 當(dāng)選中區(qū)從文檔中刪除之前在源對(duì)象觸發(fā)。
onbeforedeactivate 在 activeElement 從當(dāng)前對(duì)象變?yōu)楦肝臋n其它對(duì)象之前立即觸發(fā)。
onbeforeeditfocus 在包含于可編輯元素內(nèi)的對(duì)象進(jìn)入用戶(hù)界面激活狀態(tài)前或可編輯容器變成控件選中區(qū)前觸發(fā)。
onbeforepaste 在選中區(qū)從系統(tǒng)剪貼板粘貼到文檔前在目標(biāo)對(duì)象上觸發(fā)。
onbeforeupdate 當(dāng)成功更新數(shù)據(jù)源對(duì)象中的關(guān)聯(lián)對(duì)象前在數(shù)據(jù)綁定對(duì)象上觸發(fā)。
onblur 在對(duì)象失去輸入焦點(diǎn)時(shí)觸發(fā)。
onchange 當(dāng)對(duì)象或選中區(qū)的內(nèi)容改變時(shí)觸發(fā)。
onclick 在用戶(hù)用鼠標(biāo)左鍵單擊對(duì)象時(shí)觸發(fā)。
oncontextmenu 在用戶(hù)使用鼠標(biāo)右鍵單擊客戶(hù)區(qū)打開(kāi)上下文菜單時(shí)觸發(fā)。
oncontrolselect 當(dāng)用戶(hù)將要對(duì)該對(duì)象制作一個(gè)控件選中區(qū)時(shí)觸發(fā)。
oncut 當(dāng)對(duì)象或選中區(qū)從文檔中刪除并添加到系統(tǒng)剪貼板上時(shí)在源元素上觸發(fā)。
ondblclick 當(dāng)用戶(hù)雙擊對(duì)象時(shí)觸發(fā)。
ondeactivate 當(dāng) activeElement 從當(dāng)前對(duì)象變?yōu)楦肝臋n其它對(duì)象時(shí)觸發(fā)。
ondrag 當(dāng)進(jìn)行拖曳操作時(shí)在源對(duì)象上持續(xù)觸發(fā)。
ondragend 當(dāng)用戶(hù)在拖曳操作結(jié)束后釋放鼠標(biāo)時(shí)在源對(duì)象上觸發(fā)。
ondragenter 當(dāng)用戶(hù)拖曳對(duì)象到一個(gè)合法拖曳目標(biāo)時(shí)在目標(biāo)元素上觸發(fā)。
ondragleave 當(dāng)用戶(hù)在拖曳操作過(guò)程中將鼠標(biāo)移出合法拖曳目標(biāo)時(shí)在目標(biāo)對(duì)象上觸發(fā)。
ondragover 當(dāng)用戶(hù)拖曳對(duì)象劃過(guò)合法拖曳目標(biāo)時(shí)持續(xù)在目標(biāo)元素上觸發(fā)。
ondragstart 當(dāng)用戶(hù)開(kāi)始拖曳文本選中區(qū)或選中對(duì)象時(shí)在源對(duì)象上觸發(fā)。
ondrop 當(dāng)鼠標(biāo)按鈕在拖曳操作過(guò)程中釋放時(shí)在目標(biāo)對(duì)象上觸發(fā)。
onerrorupdate 更新數(shù)據(jù)源對(duì)象中的關(guān)聯(lián)數(shù)據(jù)出錯(cuò)時(shí)在數(shù)據(jù)綁定對(duì)象上觸發(fā)。
onfilterchange 當(dāng)可視濾鏡更改狀態(tài)或完成轉(zhuǎn)換時(shí)觸發(fā)。
onfocus 當(dāng)對(duì)象獲得焦點(diǎn)時(shí)觸發(fā)。
onfocusin 當(dāng)元素將要被設(shè)置為焦點(diǎn)之前觸發(fā)。
onfocusout 在移動(dòng)焦點(diǎn)到其它元素之后立即觸發(fā)于當(dāng)前擁有焦點(diǎn)的元素上觸發(fā)。
onhelp 當(dāng)用戶(hù)在瀏覽器為當(dāng)前窗口時(shí)按 F1 鍵時(shí)觸發(fā)。
onkeydown 當(dāng)用戶(hù)按下鍵盤(pán)按鍵時(shí)觸發(fā)。
onkeypress 當(dāng)用戶(hù)按下字面鍵時(shí)觸發(fā)。
onkeyup 當(dāng)用戶(hù)釋放鍵盤(pán)按鍵時(shí)觸發(fā)。
onlosecapture 當(dāng)對(duì)象失去鼠標(biāo)捕捉時(shí)觸發(fā)。
onmousedown 當(dāng)用戶(hù)用任何鼠標(biāo)按鈕單擊對(duì)象時(shí)觸發(fā)。
onmouseenter 當(dāng)用戶(hù)將鼠標(biāo)指針移動(dòng)到對(duì)象內(nèi)時(shí)觸發(fā)。
onmouseleave 當(dāng)用戶(hù)將鼠標(biāo)指針移出對(duì)象邊界時(shí)觸發(fā)。
onmousemove 當(dāng)用戶(hù)將鼠標(biāo)劃過(guò)對(duì)象時(shí)觸發(fā)。
onmouseout 當(dāng)用戶(hù)將鼠標(biāo)指針移出對(duì)象邊界時(shí)觸發(fā)。
onmouseover 當(dāng)用戶(hù)將鼠標(biāo)指針移動(dòng)到對(duì)象內(nèi)時(shí)觸發(fā)。
onmouseup 當(dāng)用戶(hù)在鼠標(biāo)位于對(duì)象之上時(shí)釋放鼠標(biāo)按鈕時(shí)觸發(fā)。
onmousewheel 當(dāng)鼠標(biāo)滾輪按鈕旋轉(zhuǎn)時(shí)觸發(fā)。
onmove 當(dāng)對(duì)象移動(dòng)時(shí)觸發(fā)。
onmoveend 當(dāng)對(duì)象停止移動(dòng)時(shí)觸發(fā)。
onmovestart 當(dāng)對(duì)象開(kāi)始移動(dòng)時(shí)觸發(fā)。
onpaste 當(dāng)用戶(hù)粘貼數(shù)據(jù)以便從系統(tǒng)剪貼板向文檔傳送數(shù)據(jù)時(shí)在目標(biāo)對(duì)象上觸發(fā)。
onpropertychange 當(dāng)在對(duì)象上發(fā)生對(duì)象上發(fā)生屬性更改時(shí)觸發(fā)。
onreadystatechange 當(dāng)對(duì)象狀態(tài)變更時(shí)觸發(fā)。
onresize 當(dāng)對(duì)象的大小將要改變時(shí)觸發(fā)。
onresizeend 當(dāng)用戶(hù)更改完控件選中區(qū)中對(duì)象的尺寸時(shí)觸發(fā)。
onresizestart 當(dāng)用戶(hù)開(kāi)始更改控件選中區(qū)中對(duì)象的尺寸時(shí)觸發(fā)。
onselect 當(dāng)當(dāng)前選中區(qū)改變時(shí)觸發(fā)。
onselectstart 對(duì)象將要被選中時(shí)觸發(fā)。
ontimeerror 當(dāng)特定時(shí)間錯(cuò)誤發(fā)生時(shí)無(wú)條件觸發(fā),通常由將屬性設(shè)置為無(wú)效值導(dǎo)致
相關(guān)文章
jquery插件validation實(shí)現(xiàn)驗(yàn)證身份證號(hào)等
這篇文章主要介紹了jquery插件validation實(shí)現(xiàn)驗(yàn)證身份證號(hào)、護(hù)照、電話(huà)號(hào)碼、email十分的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。2015-06-06
基于jQuery模擬實(shí)現(xiàn)淘寶購(gòu)物車(chē)模塊
這篇文章主要介紹了如何利用jQuery+css+html模擬實(shí)現(xiàn)淘寶購(gòu)物車(chē)模塊,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起動(dòng)手嘗試一下2022-03-03
jQuery+css3動(dòng)畫(huà)屬性制作獵豹瀏覽器寬屏banner焦點(diǎn)圖
本文給大家分享的是使用jQuery結(jié)合CSS3制作的仿獵豹瀏覽器寬屏banner焦點(diǎn)圖特效,代碼很簡(jiǎn)單,效果卻非常棒,而且兼容各大瀏覽器,這里推薦給大家,有需要的小伙伴參考下。2015-03-03
jQuery樹(shù)形插件jquery.simpleTree.js用法分析
這篇文章主要介紹了jQuery樹(shù)形插件jquery.simpleTree.js用法,結(jié)合實(shí)例形式分析了jQuery樹(shù)形菜單插件jquery.simpleTree.js的功能與基本用法,需要的朋友可以參考下2016-09-09
js/jq仿window文件夾移動(dòng)/剪切/復(fù)制等操作代碼
本篇文章主要介紹了js/jq仿window文件夾移動(dòng)/剪切/復(fù)制等操作代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2017-03-03
jQuery Easyui datagrid連續(xù)發(fā)送兩次請(qǐng)求問(wèn)題
用上述方式動(dòng)態(tài)加載datagrid的數(shù)據(jù)時(shí),通過(guò)net監(jiān)聽(tīng),發(fā)現(xiàn)調(diào)用了兩遍XX方法,目前的解決方案是,將url放到datagrid初始化的時(shí)候執(zhí)行2016-12-12
JQuery入門(mén)—JQuery程序的代碼風(fēng)格詳細(xì)介紹
良好的代碼風(fēng)格可以有效的增加可讀性,本節(jié)為大家介紹jQuery程序的代碼風(fēng)格,感興趣的朋友可以參考下2013-01-01
從零開(kāi)始學(xué)習(xí)jQuery (二) 萬(wàn)能的選擇器
本章講解jQuery最重要的選擇器部分的知識(shí). 有了jQuery的選擇器我們幾乎可以獲取頁(yè)面上任意的一個(gè)或一組對(duì)象, 可以明顯減輕開(kāi)發(fā)人員的工作量.2010-10-10
jQuery實(shí)現(xiàn)內(nèi)容定時(shí)切換效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)內(nèi)容定時(shí)切換效果,以完整實(shí)例形式較為詳細(xì)的分析了jQuery結(jié)合時(shí)間函數(shù)針對(duì)內(nèi)容的定時(shí)切換顯示相關(guān)技巧,需要的朋友可以參考下2016-04-04

