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 相关文章推荐
aspx中利用js实现确认删除代码
Jul 22 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
es6数值的扩展方法
Mar 11 Javascript
JavaScrip数组去重操作实例小结
Jun 20 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
PHP 图片文件上传实现代码
2010/12/29 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
Python实现一个简单的验证码程序
2017/11/03 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
深入理解Python异常处理的哲学
2019/02/01 Python
python随机模块random使用方法详解
2020/02/14 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
什么是python的必选参数
2020/06/21 Python
SQL Server面试题
2016/10/17 面试题
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
村庄绿化方案
2014/05/07 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
MySQL如何使备份得数据保持一致
2022/05/02 MySQL