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 相关文章推荐
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
script标签属性用type还是language
Jan 21 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 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五种设计模式小结
2011/03/23 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
Python类定义和类继承详解
2015/05/08 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
九年级物理教学反思
2014/01/29 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
离婚协议书的范本
2015/01/27 职场文书
综合测评个人总结
2015/03/03 职场文书
社团个人总结范文
2015/03/05 职场文书
教师节表彰会主持词
2015/07/06 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS