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 EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
使用webpack构建应用的方法步骤
Mar 04 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
详解vite2.0配置学习(typescript版本)
Feb 25 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
php中fsockopen用法实例
2015/01/05 PHP
php 常用的系统函数
2017/02/07 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
centos系统升级python 2.7.3
2014/07/03 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
金融专业个人求职信
2013/09/22 职场文书
报到证办理个人委托书
2014/10/06 职场文书
遗嘱格式范本
2015/08/07 职场文书
工商局调档介绍信
2015/10/22 职场文书
初三化学教学反思
2016/02/22 职场文书
python异步的ASGI与Fast Api实现
2021/07/16 Python
Python3的进程和线程你了解吗
2022/03/16 Python
nginx常用配置conf的示例代码详解
2022/03/21 Servers
详解Python内置模块Collections
2022/03/22 Python
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android