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客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 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
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
Python简单遍历字典及删除元素的方法
2016/09/18 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
python zip()函数使用方法解析
2019/10/31 Python
使用python制作一个解压缩软件
2019/11/13 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
法学专业应届生求职信
2013/10/16 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
公司员工活动策划方案
2014/08/20 职场文书
政工例会汇报材料
2014/08/26 职场文书
单位授权委托书范本
2014/09/26 职场文书
广告业务员岗位职责
2015/02/13 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
Python os和os.path模块详情
2022/04/02 Python