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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
JS delegate与live浅析
Dec 21 Javascript
js日期联动示例
May 02 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
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/07/07 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
php多任务程序实例解析
2014/07/19 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
Python实现PS滤镜功能之波浪特效示例
2018/01/26 Python
python numpy格式化打印的实例
2018/05/14 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
浪漫婚礼主持词
2014/03/14 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
关于环保的建议书
2014/05/12 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
趣味运动会加油词
2015/07/18 职场文书
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers