经本人测试在chrome下的从历史记录中选取值的时候也户触发input事件

前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写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:

[javascript] view plain
  1. var testinput = document.createElement('input');
  2. if('oninput' in testinput){
  3. object.addEventListener("input",fn,false);
  4. }else{
  5. object.onpropertychange = fn;
  6. }

例2、对所有ie使用onpropertychange,其他浏览器用oninput:

[javascript] view plain
  1. var ie = !!window.ActiveXObject;
  2. if(ie){
  3. object.onpropertychange = fn;
  4. }else{
  5. object.addEventListener("input",fn,false);
  6. }

汇总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不会触发。 

下面引用一篇译文:

HTML5将oninput事件标准化了,该事件用来检测用户的输入状态。当然,通过使用onkeydown或者onkeyup作为代替也是可以的。这些事件设计本意也并非如此,参见详情。

所有的现代浏览器支持oninput,其中包括IE9。对于那些老式浏览器,在不支持该事件时用keydown作为优雅降级。不幸的是,检测浏览器对该oninput事件的支持性并不容易。假定浏览器支持oninput,那么以下这段js代码的返回值为true,否则为false

'oninput' in document.createElement('input')

这段代码在大多数浏览器中正常运行,除了Firefox(见bug #414853),故仍旧需要为oninput作浏览器特性检测。除此以外就没必要为其他浏览器作特性检测了,只需为inputkeydown绑定事件,并在oninput事件触发之后删除onkeydown即可。示例如下:

someElement.oninput = function() {el.onkeydown = null;// Your code goes here
};
someElement.onkeydown = function() {// Your code goes here
}

keydown事件仅会被触发一次(在oninput事件触发前),之后再触发oninput。虽然并不完美,但总比写上一大堆oninput特性检测代码要好些吧。

译文部分转自:http://blog.163.com/jinlu_hz/blog/static/1138301522011431102044154/
译文原地址:http://mathiasbynens.be/notes/oninput
译文原作者:mathias

from:http://blog.csdn.net/freshlover/article/details/39050609

【转】总结oninput、onchange与onpropertychange事件的用法和区别相关推荐

  1. 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别

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

  2. oninput事件onpropertychange事件onchange事件textIput事件

    oninput事件&onpropertychange事件&onchange事件&textIput事件 oninput事件 简介 input,select,textarea元素值 ...

  3. onchange事件与onpropertychange事件的区别

    onchange事件与onpropertychange事件的区别 1.onchange事件与onpropertychange事件的区别:onchange事件在内容改变(两次内容有可能还是相等的)且失去 ...

  4. onchange、onpropertychange和oninput

    1.onchange事件与onpropertychange事件的区别:  onchange事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发:onpropertychange事件却是实时触发, ...

  5. JS中onpropertychange事件和onchange事件区别

    2019独角兽企业重金招聘Python工程师标准>>> 当一个HTML元素的属性用js改变的时候,都能通过 onpropertychange来捕获.例如一个 <input na ...

  6. onpropertychange事件

    document.getElementById('updatelog').attachEvent('onpropertychange', function(o) {if (o.propertyName ...

  7. javascript中的onpropertychange事件 与 jquery中的propertychange事件

    2019独角兽企业重金招聘Python工程师标准>>> jquery 中的propertychange事件不兼容IE9  而javascript中的onpropertychange事 ...

  8. 解决ie8下onpropertychange事件间歇性失效的问题

    有的时候onpropertychange事件一下好用,一下不好用 网上有的说去掉<!DOCTYPE html>就好了, 我试了下,虽然然管用,但doctype是推荐加上的,去掉他有些东西会 ...

  9. c# 事件和委托的区别,使用事件的好处

    网上一些介绍事件 (event) 的文章让人看来觉得事件和委托好像有很大的不同.通常,事件被作为一种特殊的类型或结构来看待.但事实上,事件只是委托的一个修饰符 (modifier),此外编译器增加了一 ...

最新文章

  1. 设计模式的理解: 职责链模式 (Chain of Responsibility)
  2. 开源的恶果,程序员正在「自掘坟墓」
  3. spring boot 入门-使用spring boot构建简单应用
  4. 进击的PM:作为产品总监,你需要具备什么样的能力?
  5. HDU 3401 Trade dp+单调队列优化
  6. 知识点1--认识SSM框架并准备项目
  7. 将数组分成两部分,使得这两部分的和的差最小
  8. 【Python实战】数据预处理(数据清理、集成、变换、归约)
  9. 介值定理究竟在讲什么?
  10. js 画两点之间的连线
  11. ubuntu 20.04 | 常用软件 必要配置
  12. Bugku流量分析题目总结
  13. LED灯光偏色的原因
  14. curl 实现qq挂号登录
  15. Promise使用详解2(ES6中的Promise)
  16. CubeMX C6T6有关IIC的bug
  17. 淘宝天猫京东拼多多抖音苏宁1688等平台商品详情调用(店铺商品价格监控API接口调用展示)
  18. 2021.12.28activiti
  19. 如何获取物体表面的法向量?好好谈谈光度立体法
  20. Error 1609 安装 NetAdvantage 过程中的问题解决

热门文章

  1. kahn是什么牌子_老佛爷百货
  2. 刷新存储器的容量单位是什么_SRAM的容量扩展
  3. VB6.0中创建和使用文本资源文件
  4. [vb]一些窗口消息的详解
  5. 利用RC.EXE和RCDLL.DLL创建VB6资源文件
  6. Erlang之父Joe Armstrong去世
  7. 英特尔推出新CPU架构!3D封装打破摩尔定律限制,10nm芯片明年上市
  8. 三年研发、数亿美元成本,Mate 20的“大杀器”麒麟980是怎样炼成的?
  9. 太像人手了!OpenAI用打DOTA的算法,教会了机械手“盘核桃”
  10. 首个中国高校AI人才培养计划启动,Hinton、Hopcroft和李开复开班授课