js事件

事件流（1.事件冒泡流 2.事件捕获流 3.DOM事件流）

1. IE的事件流是事件冒泡流，事件冒泡流由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
2. Netscape Communicator的事件流的事件捕获流，事件捕获流是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。
3. DOM2级事件流包含三个阶段（事件捕获阶段，处于目标阶段和事件冒泡阶段）。

事件处理程序

• HTML事件处理程序

<input onclick='fn()'/>

• DOM0事件处理程序

btn.onclick=fn;
//删除事件处理程序
btn.onclick=null;

• DOM2级事件处理程序

btn.addEventListener('click',fn,false);
//删除事件处理程序 第二个参数应该是函数名 匿名函数无法删除
btn.removeEventListener('click',fn,false);

• IE事件处理程序 IE中使用DOM2和DOM0的事件处理程序this指向不同 DOM0中指向所属元素，DOM2中指向window

//只接收事件冒泡 只接收两个参数，且事件type前需要有on
btn.attachEvent('onclick',fn)
//删除事件处理程序 第二个参数应该是函数名 匿名函数无法删除
bn.detachEvent('onclick',fn)

• 跨浏览器的事件处理程序

let 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['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['on' + type] = null;
        }
    }
};

事件对象

• DOM事件对象 兼容DOM的浏览器会将一个event对象传入到事件处理程序中。所有事件都有如下成员：

1. bubbles（事件是否冒泡）
2. cancelable（是否可以取消事件的默认行为）
3. currentTarget（当前正在处理事件的元素）
4. defaultPrevented（为true表示已经调用preventDefault()）
5. detail（与事件相关的细节信息）
6. eventPhase（调用事件处理程序的阶段 1捕获 2目标阶段 3冒泡）
7. preventDefault 取消事件的默认行为
8. stopImmediatePropagation 取消事件的进一步捕获和冒泡
9. target 事件的目标
10. trusted 为true表示事件是浏览器生成的，为false是开发人员创建的
11. type 被触发的事件类型
12. view 与事件关联的抽象视图

• IE事件对象 IE中的event取决于指定事件处理程序的方法 DOM0时，event作为windows对象的一个属性存在。DOM2中attachEvent既可以通过window.event取得，也可直接通过参数取到。所有事件对象都包含如下所列属性和方法：

1. cancelBubble 将其设为true就可取消事件冒泡，与stopPropagation（）方法相同
2. returnValue 同preventDefault（）相同
3. srcElement 与target属性相同
4. type 被触发的事件类型