DOM事件面试题

基本概念：

1. DOM事件的级别

DOM0 element.onclick=function{}
DOM2 element.addEventListener('click',function(){},false)
DOM3 element.addEventListener('keyup',function(){},false)

2. DOM事件模型

   
   image.png

3. DOM事件流

   
   image.png
   

   什么是事件流：（分三个阶段）

• 捕获阶段
• 目标阶段：事件通过捕获到达目标元素
• 冒泡阶段：从目标元素上传到 window 对象

4. 描述DOM事件捕获的具体流程

   
   image.png
   

   冒泡的流程，刚好相反
   [注] js 获取 html

document.documentElement

5. Event对象的常见应用

event.preventDefault() 阻止默认行为
event.stopPropagation() 阻止冒泡行为
event.stoplmmediatePropagation() 执行第一个事件处理程序，并阻止剩下的事件处理程序被执行
event.currentTarget 当前绑定的事件的对象
event.target 当前被点击的元素（在早期的IE中是不被支持的）

6. 自定义事件

var eve = new Event('custome');
ev.addEventListener('custome',function(){
  console.log('custome');
})
ev.dispatchEvent(eve);

CustomEvent 与 Event 的区别就在于，CustomEvent 可以指定参数
实例：https://blog.csdn.net/ruangong1203/article/details/52474452/