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 相关文章推荐
Javascript 对象的解释
Nov 24 Javascript
基于jquery的tab切换 js原理
Apr 01 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
js opener的使用详解
Jan 11 Javascript
纯javascript制作日历控件
Jul 17 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
深入了解JavaScript 私有化
May 30 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 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常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
理解AngularJs指令
2015/12/10 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
iView框架问题整理小结
2018/10/16 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
基于python绘制科赫雪花
2018/06/22 Python
python实现剪切功能
2019/01/23 Python
Python基础之文件读取的讲解
2019/02/16 Python
Python for循环及基础用法详解
2019/11/08 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
护理专业自荐信
2013/12/03 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
交通安全月活动总结
2015/05/08 职场文书
立案决定书范文
2015/06/24 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
2021年最新用于图像处理的Python库总结
2021/06/15 Python