编程 Javascript

js中的onchange和onpropertychange (onchange无效的解决方法)

Posted in Javascript onMarch 08, 2014

笔者注：今天我在用到onchange事件时没有任何反应，最后翻查资料才知道Onchange的局限性和不稳定性。而onpropertychange却能很好的实现尤其是它的实时捕捉性能更是很值得用一下（幸亏有这个性能，做出的东西老板娘很满意 o(∩_∩)o...）。

本人也比较懒，自己做的东西也懒的整理下来只能把搜索到的资料原版拿来个大家分享一下：

IE下，当一个HTML元素的属性改变的时候，都能通过 onpropertychange来捕获。例如一个

对象的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：

----------------------------------------------------------------

onpropertychange事件太可爱了,我对它一见钟情

onChange:当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]

所以说当对象的value被脚本改变时不会触发onChange事件，因为用户即没有动鼠标又没动键盘.

js中的onchange和onpropertychange (onchange无效的解决方法)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS继承--原型链继承和类式继承

Apr 08 Javascript

JQuery 控制内容长度超出规定长度显示省略号

May 23 Javascript

a标签click和href执行顺序探讨

Jun 23 Javascript

js用Date对象的setDate()函数对日期进行加减操作

Sep 18 Javascript

javascript框架设计之浏览器的嗅探和特征侦测

Jun 23 Javascript

全面解析jQuery $(document).ready()和JavaScript onload事件

Jun 08 Javascript

详解Vue学习笔记入门篇之组件的内容分发(slot)

Jul 17 Javascript

微信小程序开发之改变data中数组或对象的某一属性值

Jul 05 Javascript

微信小程序云开发之模拟后台增删改查

May 16 Javascript

layui table表格数据的新增,修改,删除,查询,双击获取行数据方式

Nov 14 Javascript

JSONObject与JSONArray使用方法解析

Sep 28 Javascript

JavaScript与JQuery框架基础入门教程

Jul 15 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