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 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
Nov 30 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 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
Laravel框架创建路由的方法详解
2019/09/04 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
WordPress JQuery处理沙发头像
2009/06/22 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
js原型链原理看图说明
2012/07/07 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
原生js实现随机点名
2020/07/05 Javascript
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python基础教程之字典操作详解
2014/03/25 Python
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
python flask框架实现重定向功能示例
2019/07/02 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
女方回门宴答谢词
2014/01/14 职场文书
医药类个人求职的自我评价
2014/02/12 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
大学军训感言1000字
2014/02/25 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
手机销售员岗位职责
2015/04/11 职场文书
房租涨价通知
2015/04/23 职场文书
卡特教练观后感
2015/06/08 职场文书
八月迷情观后感
2015/06/11 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS
MySql数据库触发器使用教程
2022/06/01 MySQL