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 读取xml,写入xml 实现代码
Jul 10 Javascript
Javascript中的相等与不等运算
Apr 25 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
javascript中可能用得到的全部的排序算法
Mar 05 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
MySql中正则表达式的使用方法描述
2008/07/30 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Django rest framework基本介绍与代码示例
2018/01/26 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
python 自动重连wifi windows的方法
2018/12/18 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
python对于requests的封装方法详解
2019/01/03 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
应届实习生的自我评价范文
2014/01/05 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
法学求职信
2014/06/22 职场文书
欢迎词怎么写
2015/01/23 职场文书
圣诞晚会主持词
2015/07/01 职场文书
python 判断文件或文件夹是否存在
2022/03/18 Python