js的事件处理机制

1.类型

事件冒泡、事件捕获

2.一些概念

事件流：当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流
事件流阶段：捕获阶段-目标阶段-冒泡阶段
事件：js与html的交互
事件对象：记录事件发生的相关信息，事件发生时产生，事件处理程序内访问，运行结束后被销毁。

3.事件代理机制原理

3.1 概念：也称事件委托
3.2 原理：利用事件冒泡来触发绑定到祖先级dom的事件
3.3 好处：{
    减少注册事件的个数，提高性能
    动态元素无需再次绑定事件
    元素被移除，也无需考虑绑定的事件没有被回收
    一个事件多个监听
    对任何dom有效，而不仅仅是html元素
}
3.4 局限性：{
    focus、blur之类事件无冒泡机制，无法委托
    mousemove、mouseout之类事件，有冒泡机制，但是通过位置计算定位，性能消耗告，不适合委托
    层级过多，可能会被某层阻止（就近委托）
}

3.5 语法：{
    target.addEventListener(type,listener[,options])
    target.addEventListener(type,listener[,useCapture])
    options:{
        capture:默认false -- 冒泡方式  true -- 捕获方式
        once:true
        passive:true -- listener永远不会调用preventDefault()
    }
    useCapture 同上capture
}

4.事件处理程序

4.1 html事件处理程序：<div onclick="handleClick()"/>
4.2 DOM0级事件处理程序：btn.onclick = function(){}  
    不能处理冒泡和捕获、不能同时添加多个
4.3 DOM2级事件处理程序： btn.addEventListener('click', 'hello', false)  
    可以绑定多个（this指向该元素的引用，事件触发的顺序是添加的顺序）
    能处理冒泡和捕获
    removeEventListener()移除
4.4 IE事件处理程序：btn.attachEvent('onclick', hello);
    类似DOM2级，ie9之前，只支持事件冒泡
    this的值会变成window对象的引用
    这里事件触发的顺序不是添加的顺序

5.阻止事件冒泡

event.stopPropagation():只会阻止事件的传播，不会阻止该事件触发<p>节点的自身绑定的其它click事件的监听函数
event.stopImmediatePropagation():彻底阻止事件的传播