js change,propertychange,input事件小议


Posted in Javascript onDecember 20, 2011

https://github.com/mootools/mootools-core/issues/2170

这个问题来自IE(LTE8)中对checkbox和radio change事件的实现问题,在IE(LTE8)中测试下来,当你点击一个checkbox或者radio,它的change事件是不会立即触发,除非你让它失去焦点,而在其他标准浏览器中(包括IE9),是点击后立即触发change事件的,这的确是个蛋疼的问题,说到解决方法,倒也比较容易,用IE(LTE8)中元素特有的propertychange事件来处理(IE9已经没这玩意儿了),就能避免上述问题,如:

checkEl.attachEvent('onpropertychange', function() { 
console.log('hey man, I am changed'); 
});

但是这样就认为解决了,是不充分的,因为像checkEl.setAttribute('data-value', 'god')这样的操作也会触发其propertychange事件,所以我们需要用其event.propertyName来判断下,如:
checkEl.attachEvent('onpropertychange', function() { 
if(window.event.propertyName == 'checked') 
console.log('blah blah blah...'); 
});

这样算是可以了。由此展开我又测试了下select,其change事件的表现在不同浏览器中一致,没有出现非要先失去焦点的情况。我又测试了下input[type="text"],它的change事件是我们所熟悉的,要失去焦点才会触发,那么当我们想让它一输入东西就立即触发呢,参考之前的例子在IE(LTE8)中,我们可以用propertychange来实现,只不过propertyName的条件变成‘value'而已。在其他标准浏览器中(包括IE9),我们可以用HTML5中的一个标准事件input, 如:
inputEl.addEventListener('input', function(event) { 
console.log('input event fired'); 
}, false);

这样我们的每一次输入都会触发此事件,有人会说为什么不用keyup来监听一下, 这里有篇文章(原文链接)对此问题进行了阐述,感兴趣的也可以读读。
Javascript 相关文章推荐
杨氏矩阵查找的JS代码
Mar 21 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 #Javascript
Javascript面向对象设计一 工厂模式
Dec 20 #Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 #Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 #Javascript
五段实用的js高级技巧
Dec 20 #Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 #Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 #Javascript
You might like
php中看实例学正则表达式
2006/12/25 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
jquery ajax 登录验证实现代码
2009/09/23 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python接口测试get请求过程详解
2020/02/28 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
师范应届毕业生自荐信
2013/11/18 职场文书
离职报告范文
2014/11/04 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
mysql如何查询连续记录
2022/05/11 MySQL