基本概念：DOM事件的级别 ==》DOM事件模型 ==》DOM事件流 ==》描述DOM事件捕获的具体流程 ==》Event对象的常见应用 ==》自定义事件
DOM事件的级别
DOM0 element.onclick = function(){}
DOM2 element.addEventListener('click',function(){},false)
DOM3 element.addEventListener('keyup',function(){},false)
DOM3相比于DOM2只是事件类型增加了很多，键盘事件等。
DOM事件模型
就是 捕获 和 冒泡，捕获从上向下，冒泡从当前元素向上。
DOM事件流
用户与浏览器交互过程中，用户点击了一个事件，这个事件怎么传递到页面中，就是事件流。
一个完整的事件流分三个阶段
1、捕获
2、目标阶段
3、冒泡
点击事件通过捕获到达目标阶段最后冒泡出去
描述DOM事件捕获的具体流程
捕获是从上向下传递，捕获的顺序是window=>document=>html=>body=>···=>目标元素
Event对象的常见应用
- event.preventDefault()
阻止默认行为 - event.stopPropagation()
阻止冒泡 - event.stopimmediatePropagation()
如果注册了2个事件的话，那么再a事件里加这段代码，就会阻止b的执行 - event.currentTarget
返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口 - event.target
当前被点击的元素，如果有10个li元素要绑定事件，不想绑定10次事件的话，可以给父级绑定一个事件利用target获取当前点击元素
自定义事件
const ul = document.getElementById('ul')
const eve = new Event('click')
ul.addEventListener('click', (e)=>{
console.log(e.target);
console.log(e.currentTarget);
})
ul.dispatchEvent(eve)
