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