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 相关文章推荐
JavaScript基本对象
Jan 11 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 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 zip文件解压类代码
2009/12/02 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
python文件的md5加密方法
2016/04/06 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
使用tensorflow实现AlexNet
2017/11/20 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
python hash每次调用结果不同的原因
2019/11/21 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
大学本科毕业生的自我鉴定
2013/11/26 职场文书
2014年三八妇女节活动方案
2014/02/28 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
护士2015年终工作总结
2015/04/29 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
2016年度创先争优活动总结
2016/04/05 职场文书
同学会演讲稿
2019/04/02 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android