js中的onchange和onpropertychange (onchange无效的解决方法)


Posted in Javascript onMarch 08, 2014

笔者注:今天我在用到onchange事件时没有任何反应,最后翻查资料才知道Onchange的局限性和不稳定性。而onpropertychange却能很好的实现尤其是它的实时捕捉性能更是很值得用一下(幸亏有这个性能,做出的东西老板娘很满意 o(∩_∩)o...)。

本人也比较懒,自己做的东西也懒的整理下来只能把搜索到的资料原版拿来个大家分享一下:

IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来捕获。例如一个

<input name="text1" id="text1" />

对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onpropertychange却能够捕获。(是实时性捕捉到的

也就是说onpropertychange能及时捕获属性值的变化,而onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件!

如:

例1:

请输入图片地址: <input type="text" name="mytext" size="10" value="" onpropertychange="document.images['myimg'].src=this.value;" /> <img id="myimg" src="/img/common/logo.gif" alt="" />

当text框中的内容被改变时,图片就会立刻被显示出来。而如果用onchange时,改变其值时还需用鼠标单击空白或其他地方使input元素失去焦点(onblur)才能激活该事件,图片显示才会被改变!

例2:

<INPUT id="image" style="WIDTH: 448px; HEIGHT: 22px"     onpropertychange="preview.src=image.value" type="file" size="55" name="File1" runat="server">

<IMG id="preview" height="170" alt="" src="" width="256">

----------------------------------------------------------------

onpropertychange事件太可爱了,我对它一见钟情

onChange:当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]

所以说当对象的value被脚本改变时不会触发onChange事件,因为用户即没有动鼠标又没动键盘.

Javascript 相关文章推荐
Javascript中的var_dump函数实现代码
Sep 07 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 #Javascript
js触发onchange事件的方法说明
Mar 08 #Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 #Javascript
javascript中的事件代理初探
Mar 08 #Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 #Javascript
Extjs表单常见验证小结
Mar 07 #Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 #Javascript
You might like
最省空间的计数器
2006/10/09 PHP
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
PHP编程函数安全篇
2013/01/08 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
javascript中直接写php代码的方法
2013/07/31 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
初识Node.js
2015/03/20 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
Python txt文件如何转换成字典
2020/11/03 Python
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
酒店办公室文员岗位职责
2013/12/18 职场文书
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS