1、跨瀏覽器兼容的事件處理
2、選擇列表框
3、單選按鈕和復(fù)選框
4、測驗(yàn)
1、跨瀏覽器兼容的事件處理
//可復(fù)用的事件處理函數(shù)
function catchEvent(eventObj, event, eventHandler) {
if (eventObj.addEventListener) {
eventObj.addEventListener(event, eventHandler, false);
} else if (eventObj.attachEvent) {
event = "on" + event;
eventObj.attachEvent(event, eventHandler);
}
}
//可復(fù)用的事件取消函數(shù)
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.動(dòng)態(tài)添加一個(gè)新的選項(xiàng)：由于數(shù)組的索引值是從 0開始編號的，因此只要以數(shù)組的 length屬性作為索引值，就可以在數(shù)組的最后面添加一個(gè)新的數(shù)組元素。
opts[opts.length] = new Option["Option Four", "Opt4"];
b.刪除一個(gè)選項(xiàng)，只需將數(shù)組中該選項(xiàng)設(shè)置為 null，這樣操作將會(huì)重新安排數(shù)組，而不會(huì)導(dǎo)致編號不連續(xù)的現(xiàn)象。
opts[2] = null;
如果想刪除所有選項(xiàng)，那么只需將數(shù)組的 length設(shè)置為 0。
opts.length = 0;
自動(dòng)選擇
//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、單選按鈕和復(fù)選框
//單選按鈕訪問：
var buttons = document.getElementById("radioGroup");
for (var i=0; i<buttons.length; i++)
{
if (buttons[i].checked) {
alert(buttons[i].value);
}
}
//復(fù)選框選擇：
var colorOpts = document.getElementById("someForm").getElementByTagName("input");
//遍歷復(fù)選框中的每個(gè) checkbox，檢查是否被選中
var isChecked = false;
for (var i=0; i<colorOpts.length; i++) {
if ((colorOpts[i].type == "checkbox") && (colorOpts[i].checked)) {
ifChecked = true;
break;
}
}
//沒有一個(gè) checkbox被選中
if (!isChecked) {
alert("no choose!");
}
4、測驗(yàn)
Q：如果表單數(shù)據(jù)不完整或無效，如何停止表單提交操作？
A：
如果你使用 DOM Level 0的事件，那么只要在事件句柄中返回 false值，并且在事件句柄腳本中取消表單提交操作即可。
如果你使用 DOM Level 2模型，那么就將 event對象的 cancelBubble屬性設(shè)置為 true（針對 IE），并調(diào)用其 preventDefault方法（針對其他瀏覽器）。
posted on 2010-05-29 15:50
黃小二 閱讀(320)
評論(0) 編輯 收藏 所屬分類:
Ajax