DOM事件类

基本概念：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)