前端面试中只要问到事件，就肯定会有DOM事件；
如果回答出来了，就会一直向下延申，其实这些东西都很简单，但我第一次被问到的时候，也是懵的；
DOM事件级别：
DOM0 element.onclick = function() { }
DOM1 一般只有设计规范，没有设计跟事件相关的东西；所以直接跳过
DOM2 element.addEventListener(‘click’, function() { }, false)
DOM3 element.addEventLIstener(‘keyup’, function() { }, false)
DOM3在DOM2的基础上参加了很多的事件类型；
DOM2、DOM3 中的第三个参数表示：该事件在捕获阶段触发（true）、在冒泡阶段触发（false）
DOM事件模型：
就是正常的事件 冒泡 和 捕获
向上冒泡 向下捕获
DOM事件流：
事件流就是： 浏览器在为这个页面与用户做交互的过程中，（比如我点击了鼠标左键）如何将这个左键是传到页面上的，又是如何响应的；
一共分为三个阶段：捕获 -> 目标阶段 -> 冒泡
事件通过 捕获 到达目标元素，这个阶段为 目标阶段； 从目标元素再上传到window对象 即冒泡阶段
DOM事件捕获过程：
一个事件首先会被 window捕获，其捕获流程：
window -> document -> html -> body -> … -> 目标元素
1 <style>
2 #ev {
3 background: lightblue;
4 width: 200px;
5 height: 200px;
6 text-align: center;
7 line-height: 200px;
8 }
9 </style>
10 <div id="ev">
11 目标元素
12 </div>
13 <script>
14 var ev = document.getElementById(‘ev‘);
15 // 为了能表现出事件捕获流程，这里使用在捕获时触发事件
16 window.addEventListener(‘click‘, function() {
17 console.log(‘window capture‘);
18 }, true)
19
20 document.addEventListener(‘click‘, function() {
21 console.log(‘document capture‘);
22 }, true)
23
24 document.body.addEventListener(‘click‘, function() {
25 console.log(‘body capture‘);
26 }, true)
27
28 ev.addEventListener(‘click‘, function() {
29 console.log(‘ev capture‘);
30 }, true)
31 </script>
Event对象的常见应用:
event.preventDefault()
阻止 元素的默认行为（如链接的跳转）
event.stopPropagaation()
阻止捕获和冒泡阶段中当前事件的进一步传播。
event.stoplmmediatePropagation()
阻止事件冒泡并且阻止相同事件的其他侦听器被调用。
备注：如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。如果其中某个监听函数执行了 event.stopImmediatePropagation() 方法，则当前元素剩下的监听函数将不会被执行。
event.currentTarget（当前所绑定的事件的元素） event.target（当前被点击元素）
这两个一般都是放在一起问的：
备注： 事件代理： 把子元素的相同事件都放在父元素上，这样只要绑定一次就可以实现多个元素的使用。在这样的情况下，你就需要去判断到底是哪一个子元素被点击了；这里就要用到event.target 。
自定义事件：
这属于是进阶了，一般情况下问到这里，你就稳了； 在实际开发中也会经常用到。
var eve = new Event(‘custome‘);
ev.addEventListener(‘custome‘, function() {
console.log(‘custome capture‘);
})
ev.dispatchEvent(eve);
原文地址：https://www.cnblogs.com/xuhua123/p/11665399.html