事件流

描述的是从页面中接受事件的顺序

IE:事件冒泡流

即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。

NT:事件捕获流

不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

事件处理程序

1.HTML事件处理程序：

HTML事件的缺点：HTML和JS代码紧密的耦合在一起

<input type="button" onclick="showMes()" />

2.DOM0级事件处理程序

较传统的方式：把一个函数值给一个事件的处理程序属性（简单，跨浏览器优势）

var btn = document.getElementById('btn');
btn.onclick=function () {
  alert("这是通过DOM0级添加的事件");
}

清除事件

btn.onclick = null;

3.DOM2级事件处理程序

DOM2级事件定义了两个方法： 用于处理指定和删除事件处理程序的操作

addEventListener()
removeEventListener()
接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值，一般false

btn.addEventListener('click', showMes, false);
btn.removeEventListener('click', showMes, false);

4.IE事件处理程序

attachEvent()
detachEvent()
接收相同的两个参数：事件处理程序的名称和事件处理程序的函数

5.跨浏览器事件处理程序

var eventUtil = { 
              // 添加句柄
              addHandler:function(element, type, handler) {
                if (element.addEventListener) {
                      element.addEventListener(type, handler, false);
                } else if (element.attachEvent) {
                      element.attachEvent("on"+type, handler);
                } else {
                      // element.onclick == element['onclick']
                      element["on"+type] = handler;
                }
              },

            // 删除句柄
              removeHandler:function(element, type, handler) {
                if (element.removeEventListener) {
                      element.removeEventListener(type, handler, false);
                } else if (element.detachEvent) {
                      element.detachEvent("on"+type, handler);
                } else {
                      // element.onclick == element['onclick']
                      element["on"+type] = null;
                }
              }
        }

使用

eventUtil.addHandler(btn, 'click', showMes);
eventUtil.removeHandler(btn, 'click', showMes);

事件对象

什么是事件对象？在触发DOM上的事件时都会产生一个对象：事件对象event

1.DOM中的事件对象

1. type属性用于获取事件类型
2. target属性用于获取事件目标
3. stopPropagation()方法用于阻止事件冒泡
4. preventDefault()方法阻止事件的默认行为

2.IE中的事件对象

1. type属性用于获取事件类型
2. srcElement属性用于获取事件的目标
3. cancelBubble属性用于阻止事件冒泡(true：阻止，false：不阻止)
4. returnValue=false阻止事件的默认行为