解析JavaScript共有的表单事件
在javascript中，除了支持鼠标、键盘、更改和HTML事件之外，所有表单字段都支持下列3个事件。
change：对于<input>和<textarea>元素，在它们失去焦点且value值改变时触发；对于<select>元素在其选项发生改变时触发。
focus：当前字段获得焦点时触发
当用于改变了当前字段的焦点，或调用了blur()或focus()方法时，都可以触发blur和focus事件。这两个事件在所有表单字段中都是相同的。但是，change事件在不同表单控件中触发的次数
会有所不同。对于<input>和<textarea>元素，当它们从获得焦点到失去焦点且value值改变时，才会触发change事件。对于<select>元素，只要用户选择了不同的选项，就会触发change事件
；换句话说，不失去焦点也会触发change事件。
通常，可以使用focus和blur事件来以某种方式改变用户界面，那么向用于该处视觉提示，要么是向界面中添加额外功能（例如，为文本框显示一个下拉选项菜单）。而change事件则经常用
与验证用户在字段中输入的数据。例如，假设有一个文本框，只允许用户输入数值。此时，可以利用focus事件来修改文本框的背景颜色，以便更清楚地表明这个字段获得了焦点。可以利用
blur事件恢复文本框的背景颜色，利用change事件在用户输入了非数值字符时再次修改背景颜色。
例子：
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
getEvent: function (event) {
return event ? event : window.event;
},
getTarget: function (event) {
return event.target || event.srcElement;
}
};
var textbox = document.forms[0].elements[0];
EventUtil.addHandler(textbox, "focus", function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (target.style.background != "red") {
target.style.background = "yellow";
}
});
EventUtil.addHandler(textbox, "blur", function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (/[^\d]/.test(target.value)) {
target.style.backgroundColor = "red";
} else {
target.style.backgroundColor = "";
}
});
EventUtil.addHandler(textbox, "change", function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (/[^\d]/.test(target.value)) {
target.style.backgroundColor = "red";
} else {
target.style.backgroundColor = "";
}
});
onfocus事件处理程序将文本框的背景色修改为黄色，以清楚地表现当前字段已经激活。
随后，onblur和onchange事件处理程序则会爱发现非数值字符时，将文本框背景修改为红色。
为了测试用户输入的是不是非数值，这里针对文本狂的value属性使用了简单的正则表达式。
而且，为了确保无论文本框的值如何变化，验证规则始终如意，onblur和onchange事件处理程序中使用了相同的正则表达式。
关于blur和change事件的关系，并没有严格的规定。
猜你喜欢：JavaScript基础之共有的表单字段属性
注意：
在某些浏览器中，blur事件会先于change事件发生；而在其它浏览器中，则恰好相反。
为此，不能假定这两个事件总会以某种数序一次触发。
您可能感兴趣的文章：
解析JavaScript共有的表单事件
JavaScript基础之共有的表单字段属性
解析jQuery的三种bind/One/Live事件绑定使用方法
JavaScript键盘事件深入解析
解密jQuery事件核心 – 委托设计（二）
JavaScript 实例
jQuery中bind,live,delegate与one方法的用法及区别解析
Javascript事件模拟(鼠标事件、键盘事件)
HTML5新特性之多线程（Worker SharedWorker）的代码详解
初窥JQuery(二) 事件机制(1)