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 相关文章推荐
简单JS代码压缩器
Oct 12 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
JS控制输入框内字符串长度
May 21 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
详解Angular2响应式表单
Jun 14 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 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中static,const与define的使用区别
2013/06/18 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
PHP中each与list用法分析
2016/01/08 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
Python模块学习 datetime介绍
2012/08/27 Python
Python 正则表达式(转义问题)
2014/12/15 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
社团成立邀请函
2014/01/08 职场文书
企业总经理岗位职责
2014/02/13 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
初中毕业感言300字
2015/07/31 职场文书
MySQL 数据表操作
2022/05/04 MySQL