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 相关文章推荐
JSON语法五大要素图文介绍
Dec 04 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
Angular实现form自动布局
Jan 28 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
解决VUE双向绑定失效的问题
Oct 29 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
Thinkphp中的volist标签用法简介
2014/06/18 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
Python自动调用IE打开某个网站的方法
2015/06/03 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
python Pillow图像处理方法汇总
2019/10/16 Python
Pycharm小白级简单使用教程
2020/01/08 Python
Python中Selenium库使用教程详解
2020/07/23 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
2014年幼儿园元旦活动方案
2014/02/13 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
保护环境建议书300字
2014/05/13 职场文书
员工保密承诺书
2014/05/28 职场文书
环保小标语
2014/06/13 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
成绩单评语
2015/01/04 职场文书
安阳殷墟导游词
2015/02/10 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL