关于jquery input textare 事件绑定及用法学习


Posted in Javascript onApril 03, 2013

(1)jquery 绑定事件
目前1.7以上,jquery的事件绑定已经用on替换了原来的bind;
区别:(个人理解)bind是一次绑定事件到每一个子节点;on是只绑定到父节点,然后冒泡到各个子节点;

用法:bind
一个事件,一个方法:$(".class input").bind('click',function(e){...;e.stopPropagation;})
两个事件,一个方法:$(".class input").bind('click mouseover',function(e){...;e.stopPropagation;})
两个事件,两个方法:$(".class input").bind({ click:function(e){...;e.stopPropagation;}, mouseover:function(e){...;e.stopPropagation;} })
on,可以直接替换掉bind,就是说上述的用法都适用于on;
此外,on比bind多了两个可选参数
on( events [, selector ] [, data ], handler(eventObject) )

selector:要绑定的元素,上面的例子可以写成:$(".class").bind('click','input',function(e){...;e.stopPropagation;})
(需要注意的是,有一个事件不好用,就是'大便'ie下独有的事件:onpropertychange;
可以用:$(".class input").bind('propertychange',function(e){...;e.stopPropagation;})
没反应:$(".class").bind('propertychange','input',function(e){...;e.stopPropagation;})
)

data:传递给event.data的参数,$(".class").bind('click','input','123',function(e){alert(e.data/*123*/);e.stopPropagation;})
(更具体用法可查看手册http://api.jquery.com/on/);

(2)input textare 事件
之前做一个文本框内容实时变化事件触发时,用onkeyup + onchange;但onchang必须在文本框失焦后才会触发,后来发现可以用
(if IE) onpropertychange + else oninput 来处理。

说明:
oninput 事件在用户输入、退格、删除、剪切、粘贴及鼠标剪切与粘贴时触发(在 IE9&IE9+ 中可能略有区别)。
(Firefox、Chrome、IE9&IE9+ 均支持)
onpropertychange 事件在用户输入、退格、删除、剪切、粘贴及鼠标剪切与粘贴时触发
(仅 IE 支持)。

(3)常用事件(https://3water.com/article/25583.htm)
oncut 事件在粘贴(ctrl + v)、鼠标粘贴时触发
onactivate 当对象设置为活动元素时触发。
onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。
onbeforeactivate 对象要被设置为当前元素前立即触发。
onbeforecut 当选中区从文档中删除之前在源对象触发。
onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即触发。
onbeforeeditfocus 在包含于可编辑元素内的对象进入用户界面激活状态前或可编辑容器变成控件选中区前触发。
onbeforepaste 在选中区从系统剪贴板粘贴到文档前在目标对象上触发。
onbeforeupdate 当成功更新数据源对象中的关联对象前在数据绑定对象上触发。
onblur 在对象失去输入焦点时触发。
onchange 当对象或选中区的内容改变时触发。
onclick 在用户用鼠标左键单击对象时触发。
oncontextmenu 在用户使用鼠标右键单击客户区打开上下文菜单时触发。
oncontrolselect 当用户将要对该对象制作一个控件选中区时触发。
oncut 当对象或选中区从文档中删除并添加到系统剪贴板上时在源元素上触发。
ondblclick 当用户双击对象时触发。
ondeactivate 当 activeElement 从当前对象变为父文档其它对象时触发。
ondrag 当进行拖曳操作时在源对象上持续触发。
ondragend 当用户在拖曳操作结束后释放鼠标时在源对象上触发。
ondragenter 当用户拖曳对象到一个合法拖曳目标时在目标元素上触发。
ondragleave 当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标对象上触发。
ondragover 当用户拖曳对象划过合法拖曳目标时持续在目标元素上触发。
ondragstart 当用户开始拖曳文本选中区或选中对象时在源对象上触发。
ondrop 当鼠标按钮在拖曳操作过程中释放时在目标对象上触发。
onerrorupdate 更新数据源对象中的关联数据出错时在数据绑定对象上触发。
onfilterchange 当可视滤镜更改状态或完成转换时触发。
onfocus 当对象获得焦点时触发。
onfocusin 当元素将要被设置为焦点之前触发。
onfocusout 在移动焦点到其它元素之后立即触发于当前拥有焦点的元素上触发。
onhelp 当用户在浏览器为当前窗口时按 F1 键时触发。
onkeydown 当用户按下键盘按键时触发。
onkeypress 当用户按下字面键时触发。
onkeyup 当用户释放键盘按键时触发。
onlosecapture 当对象失去鼠标捕捉时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseenter 当用户将鼠标指针移动到对象内时触发。
onmouseleave 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmouseover 当用户将鼠标指针移动到对象内时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
onmousewheel 当鼠标滚轮按钮旋转时触发。
onmove 当对象移动时触发。
onmoveend 当对象停止移动时触发。
onmovestart 当对象开始移动时触发。
onpaste 当用户粘贴数据以便从系统剪贴板向文档传送数据时在目标对象上触发。
onpropertychange 当在对象上发生对象上发生属性更改时触发。
onreadystatechange 当对象状态变更时触发。
onresize 当对象的大小将要改变时触发。
onresizeend 当用户更改完控件选中区中对象的尺寸时触发。
onresizestart 当用户开始更改控件选中区中对象的尺寸时触发。
onselect 当当前选中区改变时触发。
onselectstart 对象将要被选中时触发。
ontimeerror 当特定时间错误发生时无条件触发,通常由将属性设置为无效值导致

Javascript 相关文章推荐
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 #Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 #Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 #Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 #Javascript
关于js注册事件的常用方法
Apr 03 #Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 #Javascript
JS模板实现方法
Apr 03 #Javascript
You might like
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
使用Scrapy爬取动态数据
2018/10/21 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
大学四年学习的自我评价分享
2013/12/09 职场文书
餐厅考勤管理制度
2014/01/28 职场文书
电子专业求职信
2014/06/19 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
市场营销计划书
2015/01/17 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
Redis的字符串是如何实现的
2021/10/24 Redis
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL