js监听输入框值的即时变化onpropertychange、oninput
标题: js监听输入框值的即时变化onpropertychange、oninput事件
参考: http://m.jb51.net/article/27684/htm
IE8下, $('input').on('input', function(){})失效
使用
$('textarea').bind('input propertychange', function() { do something ... });
注意:这里面的事件是input和propertychange, 不是oninput 和 onproperychange事件,
oninput 和 onproperychange事件 是属于HTML DOM对象绑定的事件。
网上的答案:
1.bind()函数只能针对已经存在的元素尽心时间的设置;
但是live(),on(),delegate()均支持未来新添加元素的事件设置;
2.bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,
官方已经不推荐使用bind(),替换函数为on(),这也是1.7版本新添加的函数,
同样,可以用来代替live()函数,live()函数在1.9版本已经删除;
3. live()函数和delegate函数两者类似,但是live()函数在执行速度,灵活性和css选择器
支持方面较delegate差;
4.bind()支持jquery所有版本;live()支持jquery.8-;delagate支持jquery.1.4.2+;
on()支持jquery.1.7+;
没有解决问题;
IE下, onchange和onpropertychange不同,
onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活事件;
onpropertychange是属性值改变时,IE会通过onpropertychange来即时捕获。
其他浏览器是通过oninput事件来监听的。
事件注册方法addEvent和addEventListener不同,
attachEvent,为某一个事件附加其他处理事件,不支持firefox
addEventListener,用于firefox
-----
for example
----
docuemnt.getElementById('btn').onclick=method01;
docuemnt.getElementById('btn').onclick=method02;
docuemnt.getElementById('btn').onclick=method03;
最终执行method03,其他不会执行;
************
var el = document.getElementById('btn1');
el.attachEvent('onclick', method01);
el.attachEvent('onclick', method02);
el.attachEvent('onclick', method03);
执行顺序:method03> method02> method01
如果是firefox,不支持attachEvent(),需要用到addEventListener()
var el = document.getElementById('btn1');
el.addEventListener('onclick', method01);
el.addEventListener('onclick', method02);
el.addEventListener('onclick', method03);
*******************
判断IE浏览器的方法:
1. 判断浏览器的功能属性;if("v"=="v"){IE}
2. 判断user-agent字符串。
最终解决方法:
首先判断IE浏览器,在将webChange事件绑定到相应的触发value值改变的事件上。