js change,propertychange,input事件小议

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来监听一下, 这里有篇文章(原文链接)对此问题进行了阐述，感兴趣的也可以读读。

赞 (0)

相关推荐

  • js change,propertychange,input事件小议

    https://github.com/mootools/mootools-core/issues/2170 这个问题来自IE(LTE8)中对checkbox和radio change事件的实现问题,在IE(LTE8)中测试下来,当你点击一个checkbox或者radio,它的change事件是不会立即触发,除非你让它失去焦点,而在其他标准浏览器中(包括IE9),是点击后立即触发change事件的,这的确是个蛋疼的问题,说到解决方法,倒也比较容易,用IE(LTE8)中元素特有的propertych

  • jQuery/JS监听input输入框值变化实例

    input事件: onchange: 1.要在 input 失去焦点的时候才会触发: 2.在输入框内容变化的时候不会触发change,当鼠标在其他地方点一下才会触发: 3.onchange event 所有主要浏览器都支持: 4.onchange 属性可以使用于:<input>, <select>, 和 <textarea>. <script> function change(){ var x=document.getElementById("pa

  • Vue.JS入门教程之事件监听

    你可以使用 v-on 指令来绑定并监听 DOM 事件.绑定的内容可以是一个当前实例上的方法 (后面无需跟括号) 或一个内联表达式.如果提供的是一个方法,则原生的 DOM event 会被作为第一个参数传入,同时这个 event 会带有 targetVM 属性,指向触发该事件的相应的 ViewModel: <div id="demo"> <a v-on="click: onClick">触发一个方法函数</a> <a v-on

  • 关于js中的鼠标事件总结

    js中鼠标事件主要有onclick,onmousedown,onmouseup,oncontextmenu,ondblclick,所有的这些事件都包含有一个事件对象event,当然在IE低版本下,event对象是挂在window底下的.这个我们另行讨论. 1.通过html添加事件 <input type="button" click="alert(1)"/> 2.通过DOM0级方式添加事件 <input type="button"

  • JS实现点击事件统计的简单实例

    JS实现网站点击事件的统计功能. 点击事件上报,分为立即上报和延时上报,延时上报通过cookie存储. 一.配置参数,主要用于定义上报的一些配置信息.通过在外部定义_clickc对象重置参数. 参数名称       类型          默认值             说明     selector:      string        '_click_rp'        点击触发的选择器,支持ID.class     prefix:        string        '_rp_'

  • js监听input输入框值的实时变化实例

    1.在元素上同时绑定 oninput 和onporpertychanger事件 例: <script type="text/JavaScript"> function aa(e){alert("inputting!!");} </script> <input type="text" id="a" oninput="aa(event)" onporpertychange=&quo

  • JS双击变input框批量修改内容

    双击空白或者文字变成input框修改内容: html代码 <td class="center" ondblclick="ShowElement(this,'intro')">{$vo.intro}</td> <td class="center" ondblclick="ShowElement(this,'address')">{$vo.address}</td> js代码 //双

  • JS 仿支付宝input文本输入框放大组件的实例

    input输入的时候可以在后边显示数字放大镜 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS 仿支付宝input文本输入框放大组件</title> <script src="js/jquery.min.js"></script> <style>

  • JS实现的input选择图片本地预览功能示例

    JS实现的input选择图片本地预览功能示例

    本文实例讲述了JS实现的input选择图片本地预览功能.分享给大家供大家参考,具体如下: 预览效果见下图: HTML代码如下: <div class="content" style="margin-top:100px;height:200px;"> <div id="div4bm" style="float:left;"> <!--input[button] 触发 file click事件--&g

  • JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例

    JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例

    本文实例讲述了JavaScript(js)处理的HTML事件.键盘事件.鼠标事件.分享给大家供大家参考,具体如下: 示例代码: HTML文件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML文件</title> <script> window.οnlοad=function () {

随机推荐