事件处理

标准事件注册和删除：

addEventListener(eventType, function, boolean);

removeEventListener(eventType, function, boolean);

参数1： 事件类型，如"click",注意前面没有on

参数2：事件发生是调用的函数

参数3：默认为false，如果设置为true，则注册为事件捕获程序

---

IE9前不支持标准的addEventListenner和removeEventListener,而是使用attachEvent和detachEvent

另外，只有两个参数，事件类型和处理函数，因为IE事件不支持事件捕获

IE中事件前要加on例如："onclick" ,例如：

attachEvent("onclick", alert(1));

---

事件运行环境：

在时间处理程序内，this关键字指的是事件目标，但是使用attachEvent时this值指的是全局window对象，可以采用如下方式处理：

function addEvent(target, type, hander){
    if(target.addEventListener){
        target.addEventListener(type, handler, false);
    }else{
        target.attachEvent("on"+type, function(event){return handler.call(target, event)})
    }
}

function handler(event){
    event = event || window.event;  //ie8前并不传递事件对象，需要通过window.event获取
    .....
}

---

事件传播：

1、事件传播的三个阶段：捕获阶段（将addEventListener第三个参数设置为true时）——事件处理函数调用——事件冒泡

2、在调用目标元素上注册的事件处理函数后，大部分事件会冒泡到DOM树根，时间冒泡为大量独立文档元素上注册处理程序提供了替代方案

3、发生在文档元素上的大部分事件都会冒泡，focus、blur、scroll事件除外

4、事件传播的捕获阶段类似反向的冒泡阶段，最先调用window对象的捕获处理程序、然后是document对象的捕获处理程序...沿dom树向下

5、事件捕获常用语鼠标拖放因为处理拖放事件不能是元素内部的子元素

---

事件取消:

1、preventDefault或者是ie9前的returnValue = false； 用以取消事件的默认操作

2、stopPropagation换或者是ie9前cancleBubble = true阻止事件传播

eg：

function cancelHandler(event){
    var event = event || window.event;
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue = false;
    }

}