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

