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事件的区别:

 
1、onchange事件与onpropertychange事件的区别: 
onchange事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发;onpropertychange事件却是实时触发,即每增加或删除一个字符就会触发,通过js改变也会触发该事件,但是该事件IE专有。 
 
2、oninput事件与onpropertychange事件的区别: 
oninput事件是IE之外的大多数浏览器支持的事件,在value改变时触发,实时的,即每增加或删除一个字符就会触发,然而通过js改变value时,却不会触发;onpropertychange事件是任何属性改变都会触发的,而oninput却只在value改变时触发,oninput要通过addEventListener()来注册,onpropertychange注册方式跟一般事件一样。(此处都是指在js中动态绑定事件,以实现内容与行为分离) 
 
3、oninput与onpropertychange失效的情况: 
(1)oninput事件:a). 当脚本中改变value时,不会触发;b).从浏览器的自动下拉提示中选取时,不会触发。 
(2)onpropertychange事件:当input设置为disable=true后,onpropertychange不会触发。 

onchange/onpropertychange/oninput的更多相关文章

  1. input的onchange 和oninput事件

    一个小的功能,也体现了了这几天写程序过程中的遇到的一些常发事件,准备有时间研究一下jQuery和原生js,问题的出现:使用jQuery获取到的节点到底是属于什么,有些事件 居然不能用,就如我今天用到的 ...

  2. onchange、oninput、onpropertyChange事件的异同

    onchange事件适用于input\textarea\select元素上,支持各大浏览器,该事件只有在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效: oninput事件适用于inpu ...

  3. web前端 -- onkeydown、onkeypress、onkeyup、onblur、onchange、oninput、onpropertychange的区别

    FROM:http://www.cnblogs.com/svage/archive/2011/11/15/2249954.html onkeydown:按下任何键(字母.数字.系统.tab等)都能触发 ...

  4. onkeydown、onkeypress、onkeyup、onblur、onchange、oninput、onpropertychange的区别

    onkeydown:按下任何键(字母.数字.系统.tab等)都能触发,且对于字母不区分大小写: onkeypress:按下字母.数字键时触发,且对于字母区分大小写; onkeyup:相应的键和onke ...

  5. onchange onpropertychange 和 oninput 事件的区别

    onchange 事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发. onpropertychange 事件却是实时触发,即每增加或删除一个字符就会触发,通过 js 改变也会触发该事件,但是 ...

  6. 关于textarea的应用--onchage,onpropertychange,oninput

    oninput,onpropertychange,onchange的用法 1.onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对 ...

  7. onchange and oninput

    https://www.w3schools.com/jsref/event_oninput.asp Supported HTML tags: <input type="color&qu ...

  8. 总结oninput、onchange与onpropertychange事件的用法和区别,onchange

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...

  9. 总结oninput、onchange与onpropertychange事件的用法和区别 书写搜索的神奇代码

    总结oninput.onchange与onpropertychange事件的用法和区别 最近手机开发一个模糊搜索的功能组建,在网上就找到这篇文章! 前端页面开发的很多情况下都需要实时监听文本框输入,比 ...

随机推荐

  1. lintcode-517-丑数

    517-丑数 写一个程序来检测一个整数是不是丑数. 丑数的定义是,只包含质因子 2, 3, 5 的正整数.比如 6, 8 就是丑数,但是 14 不是丑数以为他包含了质因子 7. 注意事项 可以认为 1 ...

  2. 监控MySQL服务器主从同步异常的脚本,出现异常,报警

    监控主从复制的指标有: Slave_IO_Running: Yes Slave_SQL_Running: Yes Seconds_Behind_Master: 0 (从服务器与主服务器延时多少秒) # ...

  3. 读书笔记-《Java核心技术卷I-基础知识》

    1.定时器Timer类 构造定时器时,需要设置一个时间间隔,并告知定时器,当到达时间间隔时需要做什么操作.定时器需要知道调用哪一个方法,并要求传递的对象所属的类实现了java.awt.event包的A ...

  4. [转帖]amzon最新的产品outposts

    2018年12月3日,全球领先的企业软件创新者VMware(NYSE: VMW)发布两款运行于AWS Outposts的全新解决方案预览:VMware Cloud on AWS Outposts与VM ...

  5. net user 修改密码的坑

    不多说 直接上图 自己偷懒修改 admin的密码.. 结果没注意 这个地方 能够输入全角字符. 造成密码 实质上是全角的 标点符号 ... 以后一定注意一些. 里面的坑..说多了 都是浪费时间 另外 ...

  6. SpringBoot(七)_统一异常处理

    我感觉看了这节课,给我的思考还是很多的,感觉受益良多.废话不多说,一起学习. 统一的 外层结构返回 这样利于代码看着也规范,前端处理也统一 # 错误返回 { "code": 1, ...

  7. 使用 Idea 打 scala程序的 jar 包 - 02

    Artifact ——>+  ——>JAR ——>From modules with dependencies 选择 Module,选择主函数,OK——>OK 勾选Includ ...

  8. Codeforces 1060 F. Shrinking Tree

    题目链接 一道思维好题啊...感觉这种类型的题很检验基本功是否扎实(像我这样的就挂了). 题意:你有一棵\(n\)个点的树,每次随机选择一条边,将这条边的两个端点合并,并随机继承两个点标号中的一个,问 ...

  9. http站点如何启用为https站点?对收录的影响

    首先看一下百度官方对https站点的态度:百度开放收录https站点公告 百度搜索再次推出:全面支持https页面直接收录:另外从相关性的角度,百度搜索引擎认为权值相同的站点,采用https协议的页面 ...

  10. easyui动态生成双列头

    实习时老大交给任务,让我做这样一个效果,选择日期并点击查询时,动态生成列头,下一列要求对应日期的星期. 效果图: 下面贴出查询的单击函数: //查询按钮 function queryByDate(){ ...