共有的表单字段事件

除了支持鼠标、键盘、更改和HTML事件之外，所有表单字段都支持下列3个事件。

• blur：当前字段失去焦点时触发。
• change：对于<input>和<textarea>元素，在它们失去焦点且value值改变时触发；对于<select>元素，在其选项改变时触发。
• focus：当前字段获得焦点时触发。

当用户改变了当前字段的焦点，或者我们调用了blur()或focus()方法时，都可以触发blur和focus事件。这两个事件在所有表单字段中都是相同的。但是，change事件在不同表单控件中触发的次数会有所不同。对于<input>和<textarea>元素，当它们从获得焦点到失去焦点且value值改变时，才会触发change事件。对于<select>元素，只要用户选择了不同的选项，就会触发change事件；换句话说，不失去焦点也会触发change事件。

通常，可以使用focus和blur事件来以某种方式改变用户界面，要么是向用户给出视觉提示，要么是向界面中添加额外的功能（例如，为文本框显示一个下拉选项菜单）。而change事件则经常用于验证用户在字段中输入的数据。例如，假设有一个文本框，我们只允许用户输入数值。此时，可以利用focus事件修改文本框的背景颜色，以便更清楚地表明这个字段获得了焦点。可以利用blur事件恢复文本框的背景颜色，利用change事件在用户输入了非数值字符时再次修改背景颜色。下面就给出了实现上述功能的代码。

if (document.all && !document.getElementById){
	document.getElementById = function(id){
		return document.all[id];
	}
}

(function(){
if(!window["ADS"]){window["ADS"] = {};}

function isCompatible(other) {
	if(other===false || !Array.prototype.push || !Object.hasOwnProperty || !document.createElement || !document.getElementsByTagName){
		return false;
	}
	return true;
}
window["ADS"]["isCompatible"] = isCompatible;

function $(){
	var elements = new Array();
	for(var i=0; i<arguments.length; i++){
		var element = arguments[i];
		if(typeof element == "string"){
			element = document.getElementById(element);
		}
		if(arguments.length == 1){
			return element;
		}
		elements.push(element);
	}
	return elements;
}
window["ADS"]["$"] = $;

function addEvent(node, type, listener){
	if(!isCompatible()) return false;
	if(!(node = $(node))) return false;
	if(node.addEventListener){
		node.addEventListener(type, listener, false);
		return true;
	}else if(node.attachEvent){
		node["e"+type+listener] = listener;
		node[type+listener] = function(){node["e"+type+listener](window.event);};
		node.attachEvent("on"+type,node[type+listener]);
		return true;
	}
	return false;
}
window["ADS"]["addEvent"] = addEvent;
})();

//本页面共有两个表单
var textbox = document.forms[1].elements[0];

ADS.addEvent(textbox, "focus", function(eventObject){
	eventObject = eventObject || window.event;
	var target = eventObject.target || eventObject.srcElement;

	if (target.style.backgroundColor != "red"){
		target.style.backgroundColor = "yellow";
	}
});

ADS.addEvent(textbox, "blur", function(eventObject){
	eventObject = eventObject || window.event;
	var target = eventObject.target || eventObject.srcElement;

	if (/[^\d]/.test(target.value)){
		target.style.backgroundColor = "red";
	}else{
		target.style.backgroundColor = "";
	}
});

ADS.addEvent(textbox, "change", function(eventObject){
	eventObject = eventObject || window.event;
	var target = eventObject.target || eventObject.srcElement;

	if (/[^\d]/.test(target.value)){
		target.style.backgroundColor = "red";
	}else{
		target.style.backgroundColor = "";
	}
});

在此，onfocus事件处理程序将文本框的背景颜色修改为黄色，以清楚地表明当前字段已经激活。随后，onblur和onchange事件处理程序则会在发现非数值字符时，将文本框背景颜色修改为红色。为了测试用户输入的是不是非数值，这里针对文本框的value属性使用了简单的正则表达式。而且，为确保无论文本框的值如何变化，验证规则始终如一，onblur和onchange事件处理程序中使用了相同的正则表达式。

关于blur和change事件的关系，并没有严格的规定，在某些浏览器中，blur事件会先于change事件发生；而在其他浏览器中，则恰好相反。为此，不能假定这两个事件总会以某种顺序依次触发，这一点要特别注意。