浏览器事件机制

事件机制

事件触发三阶段

• document往事件触发处传播，遇到注册的捕获事件会触发
• 传播到事件触发处时触发注册的事件
• 从事件触发处往document传播，遇到注册的冒泡事件会触发

事件触发一般来说会按照上面的的顺序执行，但是也有特例，如果给一个目标节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行

//以下会先打印冒泡，然后是捕获
node.addEventListener('click',(event)=>{
	console.log('冒泡');
},false);
node.addEventListener('click',(event)=>{
	console.log('捕获');
},true);

注册事件

• 通常我们使用addEventListener注册事件，该函数的第三个参数可以是布尔值，也可以是对象。对于布尔值useCapture参数来说，该函数默认值为false。useCapture决定了注册的事件是捕获事件还是冒泡事件。
• 一般来说，我们希望时间只触发在目标上，这时候可以使用stopPropagation来阻止事件的进一步传播。通常我们认为stopPropagation是用来阻止事件冒泡的，其实此函数也可以阻止捕获事件。stopImmediatePropagation同样也能实现阻止事件，但是还能阻止该事件目标执行别的注册事件。

node.addEventListener('click',(event)=>{
	event.stopImmediatePropagation()
	console.log('冒泡')
},false);
//点击node只会执行上面的函数，下面这个函数不会执行
node.addEventListener('click',(event)=>{
	event.stopImmediatePropagation()
	console.log('捕获')
},ture);

事件代理

如果一个节点中的子节点是动态生成的，那么子节点需要注册事件的话应该注册到父节点上。

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
<script>
	let ul = document.querySelector('##ul')
	ul.addEventListener('click',(event)=>{
		console.log(event.target);
	})
</script>

事件代理的方式相对于直接给目标注册事件来说，有以下优点

1. 节省内存
2. 不需要给子节点注销事件