Dom事件模型
Dom事件模型分为两种：事件冒泡和事件捕获，事件冒泡模型由微软提出，而事件捕获模型由网景提出。
事件冒泡：当一个元素上的事件被触发时，事件从事件源开始，往上冒泡直到页面的根元素，这一过程被称为事件冒泡（默认方式）
事件捕获：当一个元素上的事件被触发时，事件从页面的根元素开始，往下直到事件目标元素，这一过程被称为事件捕获
如图所示：
注意：如果一个元素上既被添加了事件冒泡的的监听也被添加了事件捕获的监听，则是按照先捕获后冒泡的顺序执行监听的回调函数。
Dom事件机制
事件三要素
- 事件源：事件触发的对象
- 事件类型：通过何种方式触发，常见有：点击、键盘按下抬起......
- 事件回调函数：在事件被触发的时候，需要执行的操作
事件的执行步骤
- 获取事件源
- 绑定事件
- 添加事件回调函数
事件的绑定
使用addEventListener()绑定
使用addEventListener()可以对不同元素进行不同事件类型的监听，例如：
div.addEventListener('click',function(){
console.log('div被点击了！')
})
默认是监听事件冒泡，如果要监听事件捕获，要在addEventListener()参数中进行设置
div.addEventListener('click',function(){
console.log('div被点击了！')
},true) // true开启事件捕获
其他绑定方式
通过标签的事件属性绑定
<input type="button" onclick="fn(){console.log(event)}">
注意：这种方式绑定的事件，可以通过event获取事件对象，但是不能通过this获取到事件源
通过Dom对象的事件属性绑定
<input type="button" value="按钮" id="btn">
<script>
var btn = document.getElementById("btn");
btn.onclick=function(){
console.log("通过Dom对象的事件属性绑定");
}
</script>
事件的阻止
阻止默认事件
当一个事件发生时浏览器可能会有些默认的操作，例如：点击a标签会跳转、右键会弹出菜单等等，这时我们可以使用event.preventDefault();阻止事件的默认行为。
x.addEventListener('wheel',(e)=>{ //阻止滚动事件
e.preventDefault()
})
阻止事件冒泡
在某些特定的情况下，我们不希望事件持续冒泡到根元素，这个时候可以使用event.stopPropagation()去阻止事件继续冒泡。
div.addEventListener('click',function(e){
console.log("div3");
e.stopPropagation(); // 阻止事件继续冒泡
});
事件委托
利用事件冒泡或者事件捕获机制，通过给父元素绑定事件，从而实现对所有子元素的事件的管理，无需为每个子元素绑定事件。
// 因为事件冒泡，所以在点击li标签的时候会触发ul的单击事件
document.querySelector("ul").onclick = function (e) {
console.log(e);
console.log(e.target);
console.log(this);
// e是事件对象
// e.target是事件对象（用户操作的元素）
// this是e.currentTarget （绑定监听的元素）
// 当点击的就是本身时，e.target和this没有区别
// 但是当点击的不是本身，点击的是子标签，然后通过事件冒泡得到的事件，
// 这时e.target!=this
console.log(e.target.innerText);
}
优点：
- 减少事件的注册，降低内存占用
- 新增元素时能够动态绑定事件
