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 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
js跑步算法的实现代码
Dec 04 Javascript
jquery 选取方法都有哪些
May 18 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 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数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
js创建数组的简单方法
2016/07/27 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
Python网络编程 Python套接字编程
2017/09/13 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
python pandas 时间日期的处理实现
2019/07/30 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
超市后勤自我鉴定
2014/01/17 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
酒店开业策划方案
2014/06/02 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
2015年司机工作总结
2015/04/23 职场文书
运动会广播稿50字
2015/08/19 职场文书
iPhone13再次曝光
2021/04/15 数码科技