检查form表单数据是否发生变化

最近做了些前端的东西，很久没碰js了，所以小结一下这两天碰到的问题
1、检查form表单数据是否发生变化
这里我用的是比较默认值的方法
不需要为了复杂的事件处理而写过多的废话，每个表单元素都有与该对象相关联的默认值，即页面加载完后表单控件显示或者默认的数据值，该值可与用户操作后的值进行对比以得出表单域的值是否发生了改变。
有点麻烦的是，不同类型的表单元素的默认值属性（properties）不尽相同

//全局变量，存放每个表单元素是否发生改变的布尔值
var settings_isChanged = {};
//check form value is changed or not
function inputValueIsChanged(element){
  var type = element.type, name = element.name;
  settings_isChanged[""+name] = false;
  if(type == "checkbox" || type == "radio"){
    if(element.checked != element.defaultChecked){
      settings_isChanged[""+name] = true;
    }
  } else if (type == "hidden" || type == "password" || type == "text" || type == "textarea"){
    if(element.value != element.defaultValue){
      settings_isChanged[""+name] = true;
    }
  } else if (type == "select-one" || type == "select-multiple") {
    for(var j = 0; j < element.options.length; j++){
      if(element.options[j].selected != element.options[j].defaultSelected){
        settings_isChanged[""+name] = true;
      }
    }
  }
  if(isChanged()){
    enableBtn("saveAsDefaultBtn");
    enableBtn("useDefaultBtn");
  } else {
    disableBtn("saveAsDefaultBtn");
    disableBtn("useDefaultBtn");
  }
}

//判断form表单中是否有元素值发生变化
function isChanged(){
  for(var i in settings_isChanged){
    if(settings_isChanged[i]){
      return true;
    }
  }
}

function enableBtn(id){
  var ele = document.getElementById(id);
  if(!ele){
    return;
  }
  if(hasClass(ele, "disabled")){
    removeClass(ele, "disabled");
  }
  ele.removeAttribute("disabled");
}

function disableBtn(id){
  var ele = document.getElementById(id);
  if(!ele){
    return;
  }
  if(!hasClass(ele, "disabled")){
    addClass(ele, "disabled");
  }
  ele.setAttribute("disabled", true);
}

//下面代码来自网上：采用这种方式用原生JS实现了JQuery的addClass、removeClass、hasClass效果。
//---------------------------------------------------------------------------------------
//JQuery中有addClass,removeClass,toggleClass
//addClass(class)：为每个匹配的元素添加指定的类名
//removeClass(class)：从所有匹配的元素中删除全部或者指定的类
//hasClass(class)：如果存在（不存在）就删除（添加）一个类
function hasClass(obj, cls) {
  return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(obj, cls) {
  if (!this.hasClass(obj, cls)) obj.className += " " + cls;
}

function removeClass(obj, cls) {
  if (hasClass(obj, cls)) {
      var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
      obj.className = obj.className.replace(reg, ' ');
  }
}

2.Javascript onchange事件
为HTML表单元素添加onchange事件处理器是一种可行的方法，这也是用的最多的，但是onchange的实现有一些问题存在：
1.如果用户改变表单域的值，然后再修改回原始值，程序仍将认为表单的修改已经发生。
2.如果表单项的值是通过Javascript动态修改的，onchange事件不会被自动触发。
3.为每一个表单元素增加onchange事件会引起性能问题，特别是较大的表单。
4.如果将表单元素从DOM中增加或移除，你需要相应的注册或移除事件侦听。
5.checkbox和radio的onchange事件在某些浏览器下不能按预期工作（你应该知道是哪个浏览器）。
6.除了onchange，还有更简单有效的方案。

注释：有些资料来自网上
之所以没用jquery，是因为修改的页面比较原始，大多函数都是使用原生的js写的，onclick事件是直接写在标签上的，所以就在现有的基础上做了些改动。
所以有时候在使用jquery绑定事件的时候，要注意被绑定的标签上是否已经写了事件了。