随笔-7  评论-24  文章-102  trackbacks-0

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方法(针对其他浏览器)。
posted on 2010-05-29 15:50 黄小二 阅读(306) 评论(0)  编辑  收藏 所属分类: Ajax

只有注册用户登录后才能发表评论。


网站导航: