JS 金额自动计算与合计（监听事件）

1：

项目中有时要在页面里面自动计算金额，如：左边框里面是数量，右边被禁用的文本框里是金额，而这个金额是根据客户输入数量的多少来自动计算的（数量*单价=金额）

<input type="text" name="batchCount"  style="width: 150px" maxlength="8" onkeyup="isNumber(this);cul_charge(this);" onblur="checkInput(this);"/>

 

这里是用到onkeyup事件来调用cul_charge函数计算金额。JS里面计算用eval(bat_v*bat_charge)，有时候金额额度大需要格式化金额（见本博客 JS格式化金额）

 

2（监听事件）：

上面的是简单的计算金额，放到被禁用的文本框里面。现在这种情况不同，这种是所有 被禁用的文本框里面金额的总计

当几个文本框中的金额发生变化时，总计框里面也会变化，并重新计算，这就需要监听事件了。

 

 

//----------------------------------监听开始(邮资合计和收费总计)---------------------------------//
		var g_tp;
		//这里是解决window onload 覆盖body onload的方法,否则onload="pageInit();" 将失效.
		if (document.all){
			window.attachEvent('onload',pageInit)
		}else{
			window.addEventListener('load',pageInit,false);
		}
		//监听邮资合计和收费总计
		function $(id){return document.getElementById(id);}
		function ie(){if(navigator.userAgent.indexOf("MSIE")>0){return true}else{return false}}
		function addevent(){//添加事件,onpropertychange 遇到disabled时无效
			if(ie()==true){//IE 
				  //收费总计
				  $('baseCharges').attachEvent("onpropertychange",totalCharges_Sum);
				  $('batchClickCharges').attachEvent("onpropertychange",totalCharges_Sum);
				  $('billClickCharges').attachEvent("onpropertychange",totalCharges_Sum);
				  $('batchPaperCharges').attachEvent("onpropertychange",totalCharges_Sum);
				  $('billPaperCharges').attachEvent("onpropertychange",totalCharges_Sum);
					//邮资
				  $('localAdjustPostages').attachEvent("onkeyup",local_AP_Sum); 
				  $('outerAdjustPostages').attachEvent("onkeyup",local_AP_Sum); 
				  $('localPostages').attachEvent("onpropertychange",local_AP_Sum); 
				  $('outerPostages').attachEvent("onpropertychange",local_AP_Sum);
			}else{ //其他浏览器
				//收费总计
				  $('baseCharges').addEventListener("input",totalCharges_Sum,false);
				  $('batchClickCharges').addEventListener("input",totalCharges_Sum,false);
				  $('billClickCharges').addEventListener("input",totalCharges_Sum,false);
				  $('batchPaperCharges').addEventListener("input",totalCharges_Sum,false);
				  $('billPaperCharges').addEventListener("input",totalCharges_Sum,false);
					//邮资
				  $('localAdjustPostages').addEventListener("keyup",local_AP_Sum,false); 
				  $('outerAdjustPostages').addEventListener("keyup",local_AP_Sum,false);
				  $('localPostages').addEventListener("input",local_AP_Sum,false);  
				  $('outerPostages').addEventListener("input",local_AP_Sum,false);
			}
		}
		function deleteevent(){//销毁事件
			if(ie()==true){
				//收费总计
			    $('baseCharges').detachEvent("onpropertychange",totalCharges_Sum);
			    $('batchClickCharges').detachEvent("onpropertychange",totalCharges_Sum);
			    $('billClickCharges').detachEvent("onpropertychange",totalCharges_Sum);
			    $('batchPaperCharges').detachEvent("onpropertychange",totalCharges_Sum);
			    $('billPaperCharges').detachEvent("onpropertychange",totalCharges_Sum);
			    
				$('localAdjustPostages').detachEvent("onkeyup",local_AP_Sum);
				$('outerAdjustPostages').detachEvent("onkeyup",local_AP_Sum);
				$('localPostages').detachEvent("onpropertychange",local_AP_Sum);
				$('outerPostages').detachEvent("onpropertychange",local_AP_Sum);
			}else{
				$('localAdjustPostages').removeEventListener("keyup",local_AP_Sum,false);
				$('outerAdjustPostages').removeEventListener("keyup",local_AP_Sum,false);
				$('localPostages').removeEventListener("input",local_AP_Sum,false);
				$('outerPostages').removeEventListener("input",local_AP_Sum,false);
			  //收费总计
			  $('baseCharges').removeEventListener("input",totalCharges_Sum,false);
			  $('batchClickCharges').removeEventListener("input",totalCharges_Sum,false);
			  $('billClickCharges').removeEventListener("input",totalCharges_Sum,false);
			  $('batchPaperCharges').removeEventListener("input",totalCharges_Sum,false);
			  $('billPaperCharges').removeEventListener("input",totalCharges_Sum,false);
			}
		}
		//邮资合计,当lp,op,lap,oap这四个中有一个改变，邮资合计则重新计算
		function local_AP_Sum(){
			deleteevent();
			//略......................
			addevent();
		}
		//如果bc,bacc,bicc,bapc,bipc内值有改变，则收费总计重新计算
		function totalCharges_Sum(){
			deleteevent();
			//略..........................
			
			addevent();
		}
		
		
		window.onload=addevent; //时间调用首先从这里开始
		//----------------------------------结束---------------------------------//