面试知识归纳：2.1DOM事件

DOM事件类

• 基本概念： DOM事件的级别
• DOM事件模型
• DOM事件流
• 描述DOM事件捕获的具体流程
• Event对象的常见应用
• 自定义事件

事件级别

DOM0 element.onclick = function() {}

DOM2 element.addEventListener('click', function() {}, false)

DOM3 element.addEventListener('keyup', function() {}, false)

事件模型

捕获 从顶级元素 到 目标元素

冒泡 从目标元素 到 顶级元素

事件流

捕获阶段 -> 目标阶段 -> 冒泡过程

描述DOM事件捕获的具体流程： 捕获反之就不列了 window -> document -> html -> body -> ... -> 目标元素

Event对象的常见应用：

event.preventDefault() 阻止默认事件 event.stopPropagation() 阻止冒泡 event.stopImmediatePropagation() 同一节点，绑定多个事件，使用此函数，执行选定事件并阻止其他事件 event.currentTarget 当前绑定的事件 event.target 当前触发事件的元素

自定义事件

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

Event 和 CustomEvent 都用于自定义事件，CustomEvent除了指定事件名还可以传入一个对象，作指定参数