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表单获取和失去焦点输入框提示效果的实例代码
Aug 01 Javascript
jQuery选择器全面总结
Jan 06 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
JS实现简单打字测试
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
PHP个人网站架设连环讲(四)
2006/10/09 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
python监控进程脚本
2018/04/12 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
python Tensor和Array对比分析
2020/01/08 Python
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
学雷锋树新风演讲稿
2014/05/10 职场文书
法学自荐信
2014/06/20 职场文书
可可西里观后感
2015/06/08 职场文书
详解CSS3浏览器兼容
2022/12/24 HTML / CSS