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 相关文章推荐
Jquery 的扩展方法总结
Oct 01 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
jquery $.fn $.fx是什么意思有什么用
Nov 04 Javascript
js网页实时倒计时精确到秒级
Feb 10 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 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 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
详解JS函数重载
2014/12/04 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
BootStrap selectpicker
2016/06/20 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
浅谈Python peewee 使用经验
2017/10/20 Python
利用python画出折线图
2018/07/26 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
校班主任推荐信范文
2013/12/03 职场文书
大学学习生活感言
2014/01/18 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
项目投资建议书
2014/05/16 职场文书
宣传活动总结范文
2014/07/01 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
仲裁协议书
2014/09/26 职场文书
护士2014年终工作总结
2014/11/11 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
Java基础之this关键字的使用
2021/06/30 Java/Android