16 —— 扩展 —— 事件传播 及 浏览器的事件处理
一，事件传播
顺序 ： 捕获 => 目标 => 冒泡
1，事件的冒泡
2，事件的捕获
从外往里j进入，叫做事件的捕获过程 。
事件的处理程序发生在冒泡阶段，而不是捕获阶段
举例说明：
例：点击d3
（1） html => body => d1 => d2 => d3 事件的捕获阶段
（2） 到达 d3 事件的目标阶段
（3） d3 => d2 => d1 => body =>html 事件的冒泡阶段
<html>
<body>
<div id="d1">
d1
<div id="d2">
d2
<div id="d3">
d3
</div>
</div>
</div>
<script>
var d1 = document.getElementById('d1')
var d2 = document.getElementById('d2')
var d3 = document.getElementById('d3')
d1.onclick = ()=>{
alert('d1')
}
d2.onclick = ()=>{
alert('d2')
}
d3.onclick = ()=>{
alert('d3')
}
</script>
——————————————————————————
二，事件绑定的三种形式
1，行内绑定
2，动态绑定
d1.onclick = ()=>{}
3，事件监听
/* 事件绑定 —————> 事件监听
* 第三个参数决定这个程序在什么阶段触发
* true => 触发阶段在捕获阶段触发
* 一经捕获，立即执行
*/
d1.addEventListener('click', () => { alert('hello d1') }, true)
d2.addEventListener('click', () => { alert('hello d2') }, false)
d3.addEventListener('click', () => { alert('hello d3') }, true)
