Javascript学习指南（第2版）笔记(四) 表单、表单事件及校验

1、跨浏览器兼容的事件处理
2、选择列表框
3、单选按钮和复选框
4、测验




1、跨浏览器兼容的事件处理

// 可复用的事件处理函数
function  catchEvent(eventObj, event, eventHandler) {
   if  (eventObj.addEventListener) {
    eventObj.addEventListener(event, eventHandler,  false );
  }  else   if  (eventObj.attachEvent) {
    event  =   " on "   +  event;
    eventObj.attachEvent(event, eventHandler);
  }   
}

// 可复用的事件取消函数
function  cancelEvent(event) {
   if  (event.preventDefault) {
    event.preventDefault();
    event.stopPropagation();
  }  else  {
    event.retrunValue  =   false ;
    event.cancelBubble  =   true ;
  }    
}

---

2、选择列表框

var  opts  =  document.getElementById( " someForm " ).selectOpts.options;
for  ( var  i = 0 ; i < opts.length; i ++ ) {
   if  (opts[i].selected) {
    alert(opts[i].text  +   "   "   +  opts[i].value);
  }
}

a.动态添加一个新的选项：由于数组的索引值是从 0开始编号的，因此只要以数组的 length属性作为索引值，就可以在数组的最后面添加一个新的数组元素。
opts[opts.length] = new Option["Option Four", "Opt4"];

b.删除一个选项，只需将数组中该选项设置为 null，这样操作将会重新安排数组，而不会导致编号不连续的现象。
opts[2] = null;

如果想删除所有选项，那么只需将数组的 length设置为 0。
opts.length = 0;


自动选择

// catchEvent(document.getElementById("selectOpts"), "change", checkSelect);
var  theEvent  =  evnt  ?  evnt : window.event;

var  opts  =  document.getElementById( " someForm " ).selectOpts.options;
for  ( var  i = 0 ; i < opts.length; i ++ ) {
   if  (opts[i].selected) {
     switch  (opts[i].value) {
       case   " Opt1 "  : opts[i + 1 ].selected  =   true ;
         break ;
       case   " Opt3 "  : opts[i + 1 ].selected  =   true ;
         break ;
       case   " Opt5 "  : opts[i + 1 ].selected  =   true ;
         break ;
    }
  }
}

---

3、单选按钮和复选框

// 单选按钮访问：
var  buttons  =  document.getElementById( " radioGroup " );
for  ( var  i = 0 ; i < buttons.length; i ++ )
{
   if  (buttons[i].checked) {
    alert(buttons[i].value);
  }
}

// 复选框选择：
var  colorOpts  =  document.getElementById( " someForm " ).getElementByTagName( " input " );

// 遍历复选框中的每个 checkbox，检查是否被选中
var  isChecked  =   false ;
for  ( var  i = 0 ; i < colorOpts.length; i ++ ) {
   if  ((colorOpts[i].type  ==   " checkbox " )  &&  (colorOpts[i].checked)) {
    ifChecked  =   true ;
     break ;
  }
}

// 没有一个 checkbox被选中
if  ( ! isChecked) {
  alert( " no choose! " );
  
}

---

4、测验

Q：如果表单数据不完整或无效，如何停止表单提交操作？
A：
     如果你使用 DOM Level 0的事件，那么只要在事件句柄中返回 false值，并且在事件句柄脚本中取消表单提交操作即可。
     如果你使用 DOM Level 2模型，那么就将 event对象的 cancelBubble属性设置为 true（针对 IE），并调用其 preventDefault方法（针对其他浏览器）。