总结oninput、onchange与onpropertychange事件的使用方法和差别

旧城等待， 2021-06-26 16:06 330阅读 0赞

前端页面开发的非常多情况下都须要实时监听文本框输入，比方腾讯微博编写`140`字的微博时输入框会动态显示还能够输入的字数。

过去一般都使用`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`不会触发。

以下引用一篇译文：

`HTML5`将[`oninput`事件][oninput]标准化了，该事件用来检測用户的输入状态。当然，通过使用`onkeydown`或者`onkeyup`作为取代也是能够的。这些事件设计本意也并不是如此，參见详情。

全部的现代浏览器支持`oninput`，当中包含`IE9`。

对于那些老式浏览器，在不支持该事件时用`keydown`作为优雅降级。

不幸的是，检測浏览器对该`oninput`事件的支持性并不`easy`。

假定浏览器支持`oninput`。那么下面这段js代码的返回值为`true`，否则为`false`。

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

这段代码在大多数浏览器中正常执行，除了Firefox（见bug \#414853），故仍旧须要为`oninput`作浏览器特性检測。除此以外就不是必需为其它浏览器作特性检測了，仅仅需为`input`和`keydown`绑定事件。并在`oninput`事件触发之后删除`onkeydown`就可以。示比例如以下：

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

`keydown`事件仅会被触发一次（在`oninput`事件触发前）。之后再触发`oninput`。尽管并不完美。但总比写上一大堆`oninput`特性检測代码要好些吧。

[oninput]: https://html.spec.whatwg.org/multipage/webappapis.html#handler-oninput