1.行内式
在标签中直接通过on+事件类型 属性 去绑定事件
2.内联式
（1）直接绑定匿名函数
（2）先定义函数，再去绑定
3.监听
addEventListener
语法：事件源.addEventListener("事件类型",事件处理函数);
使用监听，可以给同一个事件类型绑定多个事件处理函数。
多个事件处理函数执行顺序是按照绑定顺序来的
先绑定先执行
在IE低版本不支持
attachEvent()
IE低版本支持
语法：事件源.attachEvent("on+事件类型",事件处理函数);
多个事件处理函数的执行顺序是按照绑定顺序的倒序来的
先绑定后执行
注册事件
eventTarget.addEventListener(type, listener[,useCapture])
-
evenTarget 表示要绑定事件的DOM元素
-
type 表示要绑定的事件，如："click"
-
listener 表示要绑定的函数
-
useCapture 可选参数，表示是否捕获过程
NOTE：useCapture 为设定是否为捕获过程，默认事件均为冒泡过程，只有 useCapture 为 true 时才会启用捕获过程。
// 获取元素
var elem = document.getElemenyById('id');
// 事件处理函数
var clickHandler = function(event) {
// statements
};
// 注册事件
elem.addEventListener('click', clickHandler, false);
// 第二种方式，不建议使用
elem.onclick = clickHandler;
// 或者来弥补只可触发一个处理函数的缺陷
elem.onclick = function(){
clickHandler();
func();
// 其他处理函数
};
取消事件
eventTarget.removeEventListener(type, listener[,useCapture]);
-
evenTarget 表示要绑定事件的DOM元素
-
type 表示要绑定的事件，如："click"
-
listener 表示要绑定的函数
-
useCapture 可选参数，表示是否捕获过程
// 获取元素
var elem = document.getElemenyById('id');
// 取消事件
elem.removeEventListener('click', clickHandler, false);
// 第二种方式。不建议使用
elem.onclick = null;
浏览器兼容型
以上均为 W3C定义的标准定义，但早期浏览器 IE8 及其以下版本，均没有采用标准的实现方式。不过这些低版本浏览器也提供了对于 DOM 事件的注册、取消以及触发的实现。
绑定兼容性写法：
function f(event) {
alert
}
// ele：触发事件的元素 type：事件类型 handler:事件处理函数
function on(ele, type, handler) {
if (ele.addEventListener) {
ele.addEventListener(type, handler);
} else {
ele.attachEvent("on" + type, handler)
}
}解除绑定兼容性写法：
// ele：触发事件的元素 type：事件类型 handler:事件处理函数
function j(ele, type, handler) {
if (ele.removeEventlistener) {
ele.removeEventlistener(type, handler);
} else {
ele.detachEvent("on" + type, handler)
}
}
