一、传统的方法：
// 例1：查找第一个<form>元素并为其绑定submit事件处理函数
document.getElementsByTagName(“form”)[0].onsubmit = function(e){
return stopDefault( e );//停止表单提交的默认行为
};
// 例2：为页面body元素绑定键盘敲击事件
document.body.onkeypress = myKeyPressHandler;
// 例3：为页面加载完毕绑定事件
window.onload = function(){ … };
二、W3C的方法（IE不支持）：
// 例1：查找第一个<form>元素并为其绑定submit事件处理函数
document.getElementsByTagName(“form”)[0].addEventListener(‘click’,function(e){
return stopDefault( e );//停止表单提交的默认行为
}, false);
// 例2：为页面body元素绑定键盘敲击事件
document.body.addEventListener(‘keypress’, myKeyPressHandler, false);
// 例3：为页面加载完毕绑定事件
window.addEventListener(‘load’, function(){ … }, false);
三、IE绑定的方法：
// 例1：查找第一个<form>元素并为其绑定submit事件处理函数
document.getElementsByTagName(“form”)[0].attachEvent(‘onclick’,function(){
return stopDefault(); //停止表单提交的默认行为
},);
// 例2：为页面body元素绑定键盘敲击事件
document.body.attachEvent(‘onkeypress’, myKeyPressHandler);
// 例3：为页面加载完毕绑定事件
window.attachEvent(‘onload’, function(){ … });
四、通用的方法：
function addEvent(element, type, handler) {
if (!handler.$$guid) {
handler.$$guid = addEvent.guid++; //为每一个事件处理函数赋予一个独立的ID
}
//为元素建立一个事件类型的散列表
if (!element.events) {
element.events = {};
}
//为没对元素/事件建立一个事件处理函数的散列表
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
//存储已有的事件处理函数（如果已存在一个）
if (element["on" + type]) {
handelers[0] = element["on" + type];
//在散列表中存储该事件的处理函数
handelers[handler.$$guid] = handler;
//赋予一个全局事件处理函数来处理所有工作
element["on" + type] = handleEvent;
};
//创建独立ID的计数器
addEvent.guid = 1;
function removeEvent(element, type, handler) {
//从散列表中删除事件处理函数
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
function handleEvent(event) {
var returnValue = true;
//获取事件对象（IE使用全局的事件对象）
event = event || fixEvent(window.event);
//获取事件处理函数散列表的引用
var handlers = this.events[event.type];
//依次执行每个处理函数
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};
//增加一些IE事件对象缺乏的方法
function fixEvent(event) {
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
}
fixEvent.preventDefault = function () {
this.returnValue = false;
}
fixEvent.stopPropagation = function () {
this.cancelBubble = true;
}
}
}
}