onpropertychange事件,顾名思义,就是property(属性)change(改变)的时候,触发事件。这是IE专有的!如果想兼容其它浏览器,有个类似的事件,oninput!
可能大家会想到另外一个事件:onchange。
但是,onchange有两个弊端,一、就是它在触发对象失去焦点时,才触发onchange事件。二、如果得用javascript改变触发对象的属性时,并不能触发onchange事件,oninput也有这个问题。
onpropertychange会在设置disable=true的时候失效。而且,onpropertychange是在触发对象改变任何属性时都会触发。而oninput只是在改变input的value值时才触发。
oninput 事件:不但JS 改变 value 值时不能触发,有从浏览器的自动下拉提示中选值时,也不会触发。
onpropertychange触发函数只有一个默认参数,是所以可以触发属性的集合。
==========================
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数。过去一般都使用onchange/onkeyup/onkeypress/onkeydown实现,但是这存在着一些不好的用户体验。比如onchange事件只在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效;而onkeydown/onkeypress/onkeyup在处理复制、粘贴、拖拽、长按键(按住键盘不放)等细节上并不完善。
onpropertychange属性可在某些情况下解决上面存在的问题,不用考虑是否失去焦点,不管js操作还是键盘鼠标手动操作,只要HTML元素属性发生改变即可立即捕获到。遗憾的是,onpropertychange为IE专属的。其他浏览器下如果想要实现这一实时监听的需求,就要用到HTML5中的标准事件oninput,不过IE9以下的浏览器是不支持oninput事件的。
所以我们需要综合oninput和onpropertychange二者来实现文本区域实时监听的功能。举例如下:
例1、对支持oninput的浏览器用oninput,其他浏览器(IE6/7/8)使用onpropertychange:
var testinput = document.createElement('input');
if('oninput' in testinput){
object.addEventListener("input",fn,false);
}else{
object.onpropertychange = fn;
}
例2、对所有ie使用onpropertychange,其他浏览器用oninput:
var ie = !!window.ActiveXObject;
if(ie){
object.onpropertychange = fn;
}else{
object.addEventListener("input",fn,false);
}
汇总onchange onpropertychange 和oninput事件的区别: