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 相关文章推荐
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 Javascript
javascript实现前端成语点击验证优化
Jun 24 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
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
Python多线程学习资料
2012/12/19 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
tensorflow 环境变量设置方式
2020/02/06 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
英文翻译的自我评价语句
2013/10/04 职场文书
预备党员转正考核材料
2014/06/03 职场文书
公司股东合作协议书
2014/09/14 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
保密工作整改报告
2014/11/06 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
Python面试不修改数组找出重复的数字
2022/05/20 Python