jQuery文本框(input textare)事件绑定方法教程


Posted in Javascript onApril 24, 2013

目前1.7以上,jquery​的事件绑定已经用on替换了原来的bind,接下来为大家介绍下bind的使用方法及input textare事件,感兴趣的朋友可以参考下

(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)常用事件
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 相关文章推荐
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
js获取ajax返回值代码
Apr 30 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
webpack4 css打包压缩问题的解决
May 18 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 #Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 #Javascript
jQuery 关于伪类选择符的使用说明
Apr 24 #Javascript
关于ExtJS4.1:快捷键支持的问题
Apr 24 #Javascript
Jquery实现三层遍历删除功能代码
Apr 23 #Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 #Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 #Javascript
You might like
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
银行青年文明号事迹材料
2014/05/31 职场文书
2015年大学生实习评语
2015/03/25 职场文书
储备店长岗位职责
2015/04/14 职场文书
担保书怎么写 ?
2019/04/22 职场文书
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技