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索引在使用中的一些困惑
Oct 24 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
vue-swiper的使用教程
Aug 30 Javascript
原生JS实现相邻月份日历
Oct 13 Javascript
JavaScript分页组件使用方法详解
Jul 26 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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 list()函数的详解
2013/06/05 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
python安装requests库的实例代码
2019/06/25 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
三好学生自我鉴定
2013/12/17 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
一份创业计划书范文
2014/02/08 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
外贸业务员求职信
2014/06/16 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
医生辞职信范文
2015/03/02 职场文书
搬迁通知
2015/04/20 职场文书
周一问候语大全
2015/11/10 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
压缩Redis里的字符串大对象操作
2021/06/23 Redis