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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 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中MVC的开发经验分享
2012/05/17 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
python flask 多对多表查询功能
2017/06/25 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
Django rest framework实现分页的示例
2018/05/24 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
门卫岗位安全职责
2013/12/13 职场文书
化验室技术员岗位职责
2013/12/24 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
python中filter,map,reduce的作用
2022/06/10 Python