JavaScript DataChange 变更前的值 恢复

一 . 问题描述：

 更改控件的值时，弹出对话框，选择Yes时，更改。选择No时，回复到更改前的值。

 

二 . 思路：

 

 1， 控件初期追加两个JavaScript事件  OnBlur事件和OnClick事件和OnDataChange事件。

 2， 点击控件时，把控件的值赋给全局变量。并把Onclick的事件清除掉。

 3， 控件失去焦点时，把OnClick的事件追加上。

 4， 控件的值发生变化时，弹出对话框，选择No时，把全局变量的值赋给控件。

 

三 .实现代码：

 

JavaScript部分

 

var Ajax = new Object(); /// <summary> /// 追加事件 /// </summary> /// <param name="obj">对象</param> /// <param name="type">事件类型</param> /// <param name="fn">事件处理函数</param> Ajax.AddEvent = function(obj,type,fn) { if(obj.addEventListener) { obj.addEventListener(type,fn,false); } else if(obj.attachEvent) { obj.attachEvent("on"+type,fn); } } /// <summary> /// 删除事件 /// </summary> /// <param name="obj">对象</param> /// <param name="type">事件类型</param> /// <param name="fn">事件处理函数</param> Ajax.RemoveEvent = function(obj,type,fn) { if(obj.removeEventListener) { obj.removeEventListener(type,fn,false); } else if(obj.detachEvent) { obj.detachEvent("on"+type,fn); } } function init() { var se = document.getElementsByTagName('select'); for (i = 0; i < se.length; i++) { Ajax.AddEvent(se[i], "DataChange", dc); Ajax.AddEvent(se[i], "click", ck); Ajax.AddEvent(se[i], "blur", br); } } var _PreResult = ""; function ck(event) { event = event || window.event; var e = event.srcElement || e.target; _PreResult = e.value; Ajax.RemoveEvent(e, "click", ck); } function br(event) { event = event || window.event; var e = event.srcElement || e.target; Ajax.AddEvent(e, "click", ck); } function dc(event) { event = event || window.event; var e = event.srcElement || e.target; if (!confirm("真的要变更吗？")) { e.value = _PreResult; return; } } 

 

HTML部分 省略。

 

四 . 总结

 画面上有大量控件时，用以上方法可以有效解决问题。