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 = "";
    }
});

摘自《JavaScript高级程序设计》(第三版) P418
ps:纯手打，出错私信我