• 技术文章 >web前端 >js教程

    js change,propertychange,input事件小议_javascript技巧

    2016-05-16 17:58:05原创699
    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来监听一下, 这里有篇文章(原文链接)对此问题进行了阐述,感兴趣的也可以读读。
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:change propertychange input
    上一篇:suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)_javascript技巧 下一篇:DIV外区域Click后关闭DIV的实现代码_jquery
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• JavaScript数组操作函数总结分享• 一起聊聊JavaScript函数的定义与基本使用• 详解如何使用Node.js开发一个简单图片爬取功能• JavaScript中的数组知识点总结• JavaScript怎么创建多个对象?详解四种方法
    1/1

    PHP中文网