最近开发一个项目，需要实现用户在WEB表单里的多个INPUT框中输入数量后，立即自动计算加总各项输入的数量之和，并显示在指定的INPUT框中，这个功能实现的原理是简单的，就是只需要在INPUT的onchange事件中计算加总并将结果赋给指定的INPUT框中即可实现，代码如下：
代码如下:
$(“input.syxcost”).change(function(){
computeReceivedsyxcost();
}
function computeReceivedsyxcost(){ //计算加总
var syxcost=0;
在JavaScript和jQuery的世界里，`change`事件是一个非常常见的事件，它通常用于监听表单元素（如`<input>`）的值何时发生改变。在大多数现代浏览器中，`change`事件会在用户离开输入框（失去焦点）且输入值发生变化时触发。然而，不同浏览器之间对`change`事件的处理可能存在差异，尤其是在一些旧版本的Internet Explorer中。
在描述的项目场景中，开发者遇到了一个典型的兼容性问题：在谷歌浏览器中，当用户在`input`元素（这里指`<input class="syxcost">`）中输入数字后，`change`事件能够正确触发，自动计算所有输入框的数值之和并显示在指定的输入框`<input id="receivedsyxcost">`中。但到了IE9，这个功能却出现了故障，`change`事件并未如预期那样即时响应。
为了解决这个问题，开发者采用了以下策略：
1. 当输入框获取焦点（`focus`事件）时，将当前的数值存储到一个自定义属性（例如`data-oval`）中。
2. 当输入框失去焦点（`blur`事件）时，比较当前的数值和之前存储在`data-oval`中的数值。
3. 如果两者不相同，说明输入值已改变，此时调用`computeReceivedsyxcost()`函数重新计算总数。
这个解决方案巧妙地避开了IE9对`change`事件的处理差异，通过自定义事件触发机制确保了在所有浏览器中的一致行为。
在编写与浏览器兼容的JavaScript代码时，需要注意以下几点：
- **事件绑定**：使用jQuery的`.on()`方法绑定事件可以提高兼容性，因为它支持在DOM元素动态添加后绑定事件。
- **跨浏览器的事件处理**：对于一些不一致的行为，如`change`事件，需要有备选方案，如上面的`focus`和`blur`组合。
- **数据存储**：使用HTML5的`data-*`属性来存储自定义数据是一种良好的实践，它可以在不污染全局变量的情况下保留信息。
- **版本测试**：进行多浏览器、多版本的测试，特别是对那些已知有兼容性问题的浏览器，如早期版本的IE。
通过这样的处理，不仅解决了IE9的问题，还确保了在其他浏览器中的正常工作，展示了在处理前端兼容性问题时的灵活性和创新思维。对于开发者来说，理解和应对这些差异是构建健壮、跨平台Web应用的关键技能。
