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中符号转意问题示例探讨
Aug 19 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 Javascript
基于javascript实现碰撞检测
Mar 12 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
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
php中session与cookie的比较
2015/01/27 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
React如何避免重渲染
2018/04/10 Javascript
react redux入门示例
2018/04/19 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
用Python实现随机森林算法的示例
2017/08/24 Python
Python求出0~100以内的所有素数
2018/01/23 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
关于感恩的演讲稿500字
2014/08/26 职场文书
冰峪沟导游词
2015/02/09 职场文书
董事长致辞
2015/07/29 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
四年级数学教学反思
2016/02/16 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android