JavaScript --- 表单focus,blur,change事件的实现

假设有一个文本框，我们只允许用户输入数值。为此，我们希望:
1.利用focus事件修改文本框内容，
2.利用blur事件回复文本框的内容,
3.利用change事件在用户输入了非数值字符时再次修改背景颜色。

var EventUtil = {addHandler: function(element, type, handler) { // 跨浏览器的添加事件方法if ( element.addEventListener) {  // DOM2级事件处理程序element.addEventListener(type, handler, false); // 第3个参数表示在冒泡阶段添加} else if (element.attachEvent) {   // IE事件处理程序element.attachEvent("on" + type, handler);} else { // DOM0级事件处理程序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];  // 得到第一个表单的第一个元素(一般是Input)EventUtil.addHandler(textbox, "focus" , function(event) {  // 添加焦点事件event = EventUtil.getEvent(event);var target = EventUtil.getTarget(event);if (target.style.backgroundColor != "red"){target.style.backgroundColor = "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";} esle {target.style.backgroundColor = "";}
});