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中的关联数组问题
Mar 04 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
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 危险函数全解析
2009/09/09 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
推荐:极酷右键菜单
2006/11/29 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
用python代码做configure文件
2014/07/20 Python
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
Django密码系统实现过程详解
2019/07/19 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
python 带时区的日期格式化操作
2020/10/23 Python
实用求职信范文分享
2013/12/25 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
大学生自我推荐信范文
2015/03/24 职场文书