事件模型：事件委托、代理？如何让事件先冒泡后捕获

事件模型：事件委托、代理？如何让事件先冒泡后捕获

事件委托：

又叫事件代理，利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

原理：

事件冒泡机制，从最深的节点开始，然后逐步向上传播事件。

作用：

①支持为同一个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的监听事件前面即可。