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 相关文章推荐
50个比较实用jQuery代码段
Sep 18 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
基于jquery编写分页插件
Mar 07 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
uni-app如何实现增量更新功能
Jan 03 Javascript
vue中data里面的数据相互使用方式
Jun 05 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使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python实现周期性抓取网页内容的方法
2015/11/04 Python
Python yield 使用方法浅析
2017/05/20 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
详解python的变量缓存机制
2021/01/24 Python
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
餐厅总厨求职信
2014/03/04 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
本科生自荐信
2014/06/18 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
2016春节慰问信范文
2015/03/25 职场文书
关于做家务的心得体会
2016/01/23 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS