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 相关文章推荐
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 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实现的短网址算法分享
2014/06/20 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
php实现websocket实时消息推送
2018/03/30 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
微信小程序实现下载进度条的方法
2017/12/08 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
vue.js计算属性computed用法实例分析
2018/07/06 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
python 定时修改数据库的示例代码
2018/04/08 Python
Python使用folium excel绘制point
2019/01/03 Python
pandas分区间,算频率的实例
2019/07/04 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
python之列表推导式的用法
2019/11/29 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
物业管理专业求职信
2014/06/11 职场文书
2014年社区工作总结
2014/11/18 职场文书
2015入党自荐书范文
2015/03/05 职场文书