常见问题：
1.基本概念：DOM事件的级别
2.DOM事件模型（DOM捕获和冒泡）
3.DOM事件流
4.描述DOM事件捕获的具体流程
5.Event对象的常见应用
6.自定义事件
答案：
DOM事件级别分为：
DOM0 element.onclick=function(){}
DOM2 element.addEventListener('click',function(){},flase)
DOM3 element.addEventListener('keyup',function(){}，flase)
DOM1时代没有涉及dom事件，所以直接跳到DOM2
DOM事件模型分为：
捕获（从目标阶段上到下）和冒泡（从目标阶段往上）
DOM事件流：
分为三个阶段：第一阶段：捕获；第二阶段：目标阶段；第三阶段：从目标元素再上传到window对象。
描述DOM事件捕获的具体流程:
1583195671738.png
冒泡的具体流程：捕获反过来即可。
Event对象的常见应用：
event.preventDefault():阻止默认事件行为
event.stopPropagation():阻止冒泡事件行为
event.stoplmmediatePropagation():事件响应优先级（假定注册两个click事件，不想让两个事件都执行 假设a加上的话，就会阻止b的执行）
event.currentTarget 当前被点击的元素
event.target 当前绑定的事件
自定义事件：
想在别的地方触发这个事件，而不是用回调的方式进行处理。
1583197749284.png
customevent除了可以指定事件名，还可以后面跟着一个指定参数，event（‘custome')只能指定事件名，不能加指定参数。
代码演示 捕获阶段
发现代码没有按照捕获顺序书写 但打印的依然是从window到目标阶段ev 如果想演示冒泡 将true改为flase即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event</title>
</head>
<body>
<div id="ev">
<style>
#ev {
width: 300px;
height: 100px;
background-color: red;
color: aliceblue;
text-align: center;
line-height: 100px;
}
</style>
目标元素
</div>
<script>
var ev = document.getElementById('ev');
// 做click的一个捕获事件 最后的参数默认为flase 也就是在冒泡阶段触发 如果改为true意味着其在捕获阶段触发
window.addEventListener('click', function () {
console.log('window capture');
}, true);
ev.addEventListener('click', function () {
console.log('ev capture')
}, true);
document.addEventListener('click', function () {
console.log('document capture')
}, true);
document.body.addEventListener('click', function () {
console.log('body capture')
}, true);
// document.documentElement是指html 也指外层节点
document.documentElement.addEventListener('click', function () {
console.log('html capture')
}, true);
// 自定义事件
var eve = new Event('test')
ev.addEventListener('test',function(){
console.log('test dispatch');
})
// ev.dispatchEvent(eve);//程序注册以后就直接触发 所以程序自动打印出结果
//自定义事件 一般是用于与其他事件结合使用 例如利用定时器
setTimeout(function(){
ev.dispatchEvent(eve);
},1000);
</script>
</body>
</html>
