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 相关文章推荐
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
layui select动态添加option的实例
Mar 07 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 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实现定时执行任务的方法
2014/10/05 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
原生js仿浏览器滚动条效果
2017/03/02 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
Python3使用Matplotlib 绘制精美的数学函数图形
2019/04/11 Python
python列表返回重复数据的下标
2020/02/10 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
python网络编程之五子棋游戏
2020/05/14 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
后勤主管工作职责
2013/12/07 职场文书
物流仓储计划书
2014/01/10 职场文书
捐书倡议书
2014/08/29 职场文书
顶岗实习协议书
2015/01/29 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书