浏览器运行环境知识点(不定期更新)

199 阅读1分钟

事件流(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>