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 相关文章推荐
小试JQuery的AutoComplete插件
May 04 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
javascript中如何处理引号编码"
Aug 15 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
基于vue实现圆形菜单栏组件
Jul 05 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注入点构造代码
2008/06/14 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
jQuery 性能优化指南 (1)
2009/05/21 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
中国跨境电商:Tomtop
2017/03/16 全球购物
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
2014年基建工作总结
2014/12/12 职场文书
先进人物事迹材料
2014/12/29 职场文书
酒会邀请函
2015/01/31 职场文书
朋友离别感言
2015/08/04 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
python实现双向链表原理
2022/05/25 Python