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 对话框和状态栏使用说明
Oct 25 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
jQuery的框架介绍
May 11 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
详解puppeteer使用代理
Dec 27 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
vue渲染方式render和template的区别
Jun 05 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&amp;mysql(一)
2006/10/09 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
php实现中文转数字
2016/02/18 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
Python性能优化的20条建议
2014/10/25 Python
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
顶岗实习接收函
2014/01/09 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
Python办公自动化解决world文件批量转换
2021/09/15 Python