elem.onxxx = function(event){}
// 兼容性很好，但是同一个元素同一个事件上只能绑定一个处理程序，基本等 同于写在HTML行间上
// 程序this指向DOM元素本身

elem.onxxx = null/false/"";

// 绑定事件
div.onclick = function() {
    this.style.backgroundColor = "red";
}
// 解除事件
div.onclick = null;

div.onclick = function() {
    this.style.backgroundColor = "red";
    console.log("1次失效");
    // 解除事件
    div.onclick = null;
}

obj.addEventListener(type,fn,false)  // 【参数：type事件类型、处理函数、false】
// IE9以下不兼容，可以为一个事件绑定多个处理程序
// 程序this指向DOM元素本身

var div = document.getElementsByTagName("div")[0];

// 事件处理程序
function handle() {
    this.style.backgroundColor = "red";
}
// 绑定事件
div.addEventListener("click", handle, false)

// 解除事件 
div.removeEventListener("click", handle, false)
//【注意】：若绑定匿名函数，则无法解除

obj.attachEvent(type,fn)   // 【参数：type有on的事件类型、事件处理函数】 
// IE独有
// 程序This指向window

// 事件处理程序
function handle() {
    this.style.backgroundColor = "red";
}
// 绑定事件
div.attachEvent("onclick", handle);
// 解除事件 
div.detachEvent("onclick", handle)
//【注意】：若绑定匿名函数，则无法解除

obj.attachEvent("onclick"function() {
    handle.call(obj);    // 通过.call()方法改变this指向
})
function handle() {
    // 事件处理程序 
}

function addEvent(elem, type, handle) {
    // 判断浏览器是否支持这个方法
    if (elem.addEventListener) {
    } else if (elem.attachEvent) {
        elem.attachEvent("on" + type, function() {
            handle.call(elem);
        });
    } else {
        elem["on" + type] = handle;
    }
}

// DOM
<div style="width: 200px; height: 200px; background-color: #9ACD32;"></div>

var div = document.getElementsByTagName("div")[0];   // 获取DOM
// 外部事件处理程序
function handle() {
    this.style.backgroundColor = "red";
}
addEvent(div, "click", handle);   // 调用已封装的函数addEvent();传如相应参数