还好有propertychange（IE）和oninput事件。
oninput是标准浏览器的事件，一般应用于input元素，当input的value发生变化时就会发生，无论是键盘输入还是鼠标粘贴的改变都能即时监听到。
浏览器兼容
IE9以下是不支持的。这个时候就要用到IE专有的propertychange事件。顾名思义，翻译过来叫属性变更事件，这个事件就比较强大了，不仅仅会监听到input的value属性，还包括其他标签的属性各种属性发生变化都会发生该事件，比如span元素的style属性。在事件发生时还可以用event.propertyName访问到改变的属性名。
JavaScript中的`propertychange`和`oninput`事件是两种用于监听元素属性变化的重要机制，尤其在处理用户输入和实时更新界面的场景下显得尤为重要。它们虽然功能相似，但有着明显的浏览器兼容性和应用场景的区别。
`oninput`事件是HTML5引入的一个标准事件，它主要针对`<input>`元素，当用户对输入框进行编辑，例如通过键盘输入或粘贴内容，导致`<input>`元素的`value`属性发生变化时，这个事件会被触发。`oninput`事件的优势在于它能实时捕获并响应用户的输入行为，使得开发者能够及时更新页面状态。然而，`oninput`事件的兼容性并不理想，它在IE9以下的版本中并未得到支持。
在这种情况下，IE浏览器提供了独有的`propertychange`事件作为替代方案。`propertychange`事件不仅适用于`<input>`元素，还广泛应用于其他HTML元素，只要元素的任何属性发生改变，包括但不限于`<span>`的`style`属性，`propertychange`事件都会被触发。这使得它具备更广泛的监听范围。此外，当`propertychange`事件触发时，可以通过`event.propertyName`来获取到具体哪个属性发生了变化，这对于定位问题和处理特定属性变化非常有用。
虽然`propertychange`事件在IE浏览器中表现出色，但它并非W3C标准，这意味着在其他现代浏览器中不被支持。因此，在开发跨浏览器的应用时，通常需要结合使用这两种事件，以确保在所有目标平台上都能正确工作。例如，可以先尝试注册`oninput`事件，如果浏览器不支持，再退而求其次注册`propertychange`事件。
为了实现这样的兼容性处理，可以编写如下的JavaScript代码示例：
```javascript
var inputElement = document.getElementById('yourInputId');
if ('oninput' in inputElement) {
inputElement.addEventListener('input', function(event) {
// 处理oninput事件
});
} else {
inputElement.attachEvent('propertychange', function(event) {
if (event.propertyName === 'value') {
// 处理propertychange事件
}
});
}
```
这段代码首先检查`<input>`元素是否支持`oninput`事件，如果支持，则注册`oninput`事件处理器；如果不支持，那么就为IE浏览器注册`propertychange`事件处理器，并特别检查`event.propertyName`是否为'value'，以确保只处理与输入相关的变更。
`propertychange`和`oninput`事件是JavaScript中处理元素属性变化的重要工具，它们各有优缺点，开发者需要根据目标浏览器的兼容性和具体需求选择合适的方式来监听和响应属性变化。在追求兼容性的前提下，结合使用这两者可以构建出更加健壮的前端应用。
