前言
转载文，本文主要详情DOM事件级别、DOM事件模型、事件流、事件代理商和Event对象常见的应用，希望对你们有些帮助和启发！
一、DOM事件级别
DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM 0级事件解决，DOM 2级事件解决和DOM 3级事件解决。因为DOM 1级中没有事件的相关内容，所以没有DOM 1级事件。
1.DOM 0级事件
el.onclick=function(){}
当希望为同一个元素/标签绑定多个同类型事件的时候（如给上面的这个btn元素绑定3个点击事件），是不被允许的。DOM0事件绑定，给元素的事件行为绑定方法，这些方法都是在当前元素事件行为的冒泡阶段(或者者目标阶段)执行的。
2.DOM 2级事件
el.addEventListener(event-name, callback, useCapture)
event-name: 事件名称，可以是标准的DOM事件
callback: 回调函数，当事件触发时，函数会被注入一个参数为当前的事件对象 event
useCapture: 默认是false，代表事件句柄在冒泡阶段执行
IE9以下的IE浏览器不支持 addEventListener()和removeEventListener()，使用 attachEvent()与detachEvent() 代替，由于IE9以下是不支持事件捕获的，所以也没有第三个参数，第一个事件名称前要加on。
3.DOM 3级事件
在DOM 2级事件的基础上增加了更多的事件类型。
UI事件，当客户与页面上的元素交互时触发，如：load、scroll
焦点事件，当元素取得或者失去焦点时触发，如：blur、focus
鼠标事件，当客户通过鼠标在页面执行操作时触发如：dblclick、mouseup
滚轮事件，当使用鼠标滚轮或者相似设施时触发，如：mousewheel
文本事件，当在文档中输入文本时触发，如：textInput
键盘事件，当客户通过键盘在页面上执行操作时触发，如：keydown、keypress
合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
同时DOM3级事件也允许使用者自己设置少量事件。
二、DOM事件模型和事件流
DOM事件模型分为捕获和冒泡。一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。
（1）捕获阶段：事件从window对象自上而下向目标节点传播的阶段；
（2）目标阶段：真正的目标节点正在解决事件的阶段；
（3）冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。
DOM事件捕获的具体流程
捕获是从上到下，事件先从window对象，而后再到document（对象），而后是html标签（通过document.documentElement获取html标签），而后是body标签（通过document.body获取body标签），而后按照普通的html结构一层一层往下传，最后到达目标元素。
而事件冒泡的流程恰好是事件捕获的逆过程。
接下来我们看个事件冒泡的例子：
正如我们上面提到的onclick给元素的事件行为绑定方法都是在当前元素事件行为的冒泡阶段(或者者目标阶段)执行的。
三、事件代理商(事件委托)
因为事件会在冒泡阶段向上传播到父节点，因而可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一解决多个子元素的事件。这种方法叫做事件的代理商（delegation）。
1.优点
减少内存消耗，提高性能
假设有一个列表，列表之中有大量的列表项，我们需要在点击每个列表项的时候响应一个事件
假如给每个列表项逐个都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能。借助事件代理商，我们只要要给父容器ul绑定方法就可，这样不论点击的是哪一个后代元素，都会根据冒泡传播的传递机制，把容器的click行为触发，而后把对应的方法执行，根据事件源，我们可以知道点击的是谁，从而完成不同的事。
动态绑定事件
在很多时候，我们需要通过客户操作动态的增删列表项元素，假如一开始给每个子元素绑定事件，那么在列表发生变化时，就需要重新给新添加的元素绑定事件，给即将删去的元素解绑事件，假如用事件代理商就会省去很多这样麻烦。
2.如何实现
接下来我们来实现上例中父层元素 #list 下的 li 元素的事件委托到它的父层元素上：
四、Event对象常见的应用
event. preventDefault()
假如调用这个方法，默认事件行为将不再触发。什么是默认事件呢？例如表单一点击提交按钮(submit)跳转页面、a标签默认页面跳转或者是锚点定位等。
很多时候我们使用a标签仅仅是想当做一个普通的按钮，点击实现一个功能，不想页面跳转，也不想锚点定位。
也可以通过JS方法来阻止，给其click事件绑定方法，当我们点击A标签的时候，先触发click事件，其次才会执行自己的默认行为
接下来我们看个例子：输入框最多只能输入六个字符，如何实现？
event.stopPropagation() & event.stopImmediatePropagation()
event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件解决程序被执行。上面提到事件冒泡阶段是指事件从目标节点自下而上向window对象传播的阶段。
我们在例4的inner元素click事件上，增加event.stopPropagation()这句话后，就阻止了父事件的执行，最后只打印了’inner’。
stopImmediatePropagation 既能阻止事件向父元素冒泡，也能阻止元素同事件类型的其它监听器被触发。而 stopPropagation 只能实现前者的效果。我们来看个例子：
如上所示，使用 stopImmediatePropagation后，点击按钮时，不仅body绑定事件不会触发，与此同时按钮的另一个点击事件也不触发。
event.target & event.currentTarget
老实说这两者的区别，并不好用文字形容，我们先来看个例子：
当我们点击最里层的元素d的时候，会依次输出:
从输出中我们可以看到，event.target指向引起触发事件的元素，而event.currentTarget则是事件绑定的元素，只有被点击的那个目标元素的event.target才会等于event.currentTarget。也就是说，event.currentTarget始终是监听事件者，而event.target是事件的真正发出者。
五、参考文章
DOM级别与DOM事件
DOM事件机制解惑
事件模型
JavaScript 事件委托详解
JavaScript 事件的学与记：stopPropagation 和 stopImmediatePropagation
event.target和event.currentTarget的区别
原文： ljianshu/Blog/issues/44
最后：“相信有很多想学前台的小伙伴，今年年初我花了一个月整理了一份最适合2018年学习的web前台干货，从最基础的HTML+CSS+JS到手机端HTML5等都有整理，送给每一位前台小伙伴，53763，1707这里是小白聚集地，欢迎初学和进阶中的小伙伴。”
祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。
