浏览器运行环境知识点（不按期更新）

事件流（Event Flow）

历史渊源，网景提出了事件捕获 event capture（document层层传递到目标节点），微软提出了事件冒泡 event bubbling（目标节点层层传递至document）。 最后网景死了，事件冒泡被全部的浏览器兼容了,事件捕获IE10如下不兼容。 w3c根据这对冤家主张，采起了折衷方案先捕获再冒泡，目标节点注册的事件不区分类型，先注册先触发。（DOM2级标准事件流）

addEventListener 参数详解: 事件类型 、回调方法 、注册事件流类型（默认false冒泡；true表明捕获）

var dom = document.getElementById('target');
dom.addEventListener('click',handler,true);
var handler = function(){
    alert('click')
}


复制代码

IE9以其下不兼容addEventListener，使用attachEvent

---

根据事件流特性，咱们使用事件委托的方式处理事件：

事件委托为抽象出处理业务事件提供了可能性，减小了事件注册数量。抽象、复用是编程之美，减小事件注册为咱们减小了资源的消耗。

var domList = document.getElementsByTag('li');
domList.addEventListener('click',handler,true);
var handler = function(e){
    var target = e.currentTarget;
    if(target.XXX == YYYYY){
        // TODO Somthing
    }
}


复制代码

---

再多说一点，事件通知方式有两种： DOM2 事件监听（event listener）和 DOM0 事件处理(event handler). 和DOM3

// 监听
dom.addeventListener('XXX',handler)
// on-event 事件处理，两种使用方式，dom节点属性和html标签绑定
dom.onclick = function(){
    
} 
or
<div onclick="return alert('div')"></div>
复制代码