6- js监听输入框值的即时变化onpropertychange、oninput

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值改变的事件上。