假設有一個文本框，我們只允許用戶輸入數值。為此，我們希望:
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:純手打，出錯私信我