change,propertychange,input事件小议
事件 input Change
2023-09-11 14:14:15 时间
github上关于mootools一个issue的讨论很有意思,所以就想测试记录下。感兴趣的可以点击原页面看看。
这个问题来自IE(LTE8)中对checkbox和radio change事件的实现问题,在IE(LTE8)中测试下来,当你点击一个checkbox或者radio,它的change事件是不会立即触发,除非你让它失去焦点,而在其他标准浏览器中(包括IE9),是点击后立即触发change事件的,这的确是个蛋疼的问题,说到解决方法,倒也比较容易,用IE(LTE8)中元素特有的propertychange事件来处理(IE9已经没这玩意儿了),就能避免上述问题,如:
1
2
3
|
checkEl.attachEvent( 'onpropertychange' , function () { console.log( 'hey man, I am changed' ); }); |
但是这样就认为解决了,是不充分的,因为像checkEl.setAttribute('data-value', 'god')这样的操作也会触发其propertychange事件,所以我们需要用其event.propertyName来判断下,如:
1
2
3
4
|
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来监听一下, 这里有篇文章(原文链接)对此问题进行了阐述,感兴趣的也可以读读。
相关文章
- 添加了click事件不响应
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- iOS代码实现:创建按钮,绑定按钮事件,读取控件值
- zepto+mui开发中的tap事件重复执行
- Vue - 监听 Input 框回车事件
- JavaScript自定义事件
- 事件
- Python的条件锁与事件共享
- 《JavaScript入门经典(第6版)》——2.5 捕获鼠标事件
- 事件(Event)机制 .on() .emit() .once() .removeListener()
- onclick 事件
- 桌面窗体应用程序,FormClosing事件
- Input and Output-The input is all the sources of action for your app
- 移动端 input的失去焦点事件和点击按钮的点击事件冲突,怎么解决?
- db file scattered read 等待事件
- 从0开发游戏引擎之Win32平台用户输入事件Input类实现