事件模型:事件委托、代理?如何让事件先冒泡后捕获
事件委托:
又叫事件代理,利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
原理:
事件冒泡机制,从最深的节点开始,然后逐步向上传播事件。
作用:
①支持为同一个DOM元素注册多个同类型事件;
②可将事件分为事件捕获和事件冒泡。
addEventListener(event,function,useCapture布尔值)
默认为false冒泡,true为捕获
attachEvent()
//IE8及IE更早版本
detachEvent()
//移除事件监听
//不使用事件捕获
window.onload = function(){
let oBox = document.getElementById("box");
oBox.onclick = function(){
alert(1); //不触发
}
oBox.onclick = function(){
alert(2); //触发
}
}
//使用事件捕获
window.onload = function(){
oBox.addEventListener("click",function(){
alert(1); //触发
})
oBox.addEventListener("click",function(){
alert(2); //触发
})
}
事件捕获:
当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件。
当为事件捕获(useCapture:true)时,先执行body的事件,再执行div的事件
事件冒泡:
当事件到达目标节点后,会沿着捕获阶段的路线原路返回。同样,所有经过的节点,都会触发对应的事件。
当为事件冒泡(useCapture:false)时,先执行div的事件,再执行body的事件
先冒泡后捕获:
根据w3c标准,应先捕获再冒泡。若要实现先冒泡后捕获,给一个元素绑定两个addEventListener,其中一个第三个参数设置为false(即冒泡),另一个第三个参数设置为true(即捕获),调整它们的代码顺序,将设置为false的监听事件放在设置为true的监听事件前面即可。