冒泡阶段就是事件从最顶层的子节点一步步冒泡到各级父元素阶段

addEventListener("eventName", doSomething, false) , 第三个Boolean参数为 true 时, 表示事件处理程序注册在时间捕获阶段, 为 false 时, 注册在冒泡阶段.

js的事件类型有很多，我们先来大概总结一下常用的JS事件

click点击事件、mousedown鼠标按下事件、mousemove鼠标移动事件、mouseup鼠标抬起事件

contextmenu右键出菜单事件、mouseenter/mouseover鼠标进入事件、mouserleave/mouseout鼠标离开事件

可通过事件对象的button属性来区分是左键\滚轮\右键，分别对应值 0 / 1 / 2

DOM3规定：click事件只能监听左键；只能通过mousedown和mouseup来判断鼠标键

keydown某键被按下时、keyup被松开时、keypress按下并且松开时

触发顺序：先 keydown，然后keypress，最后keyup

keydown和keypress的区别：

input：文本变化时触发

change：聚焦或失去焦点时判断状态是否改变，发生改变是触发change事件

focus：聚焦时触发

blur：失去焦点时触发

利用focus和blur可模拟placeholder

scroll：滚动条滚动时

load：页面加载完触发

abort：图像的加载失败

dblclick：双击事件

error：当加载图像和文档时发生错误

resize：窗口或者框架被重新调整大小

select：文本被选中时

reset：点击重置按钮时

submit：点击提交按钮时

接着看如何给DOM元素绑定事件处理函数

兼容性很好

但是根据js的特点，这种赋值的方式肯定会被后面的值覆盖。因此这种方式绑定事件处理函数规则是：同一个元素同一个事件只能绑定一个处理函数。等同于第一种写在行间。

IE8及以下不兼容

通过addEventListener绑定的方式，同个元素的同一个事件可以绑定多个处理函数，不会被覆盖。

attachEvent跟addEventListener 基本一致，也是同一个元素的同一个事件可以绑定多个处理函数，不会被覆盖。不同的是attachEvent可以绑定的函数是可以重复的，即即使绑定同一个函数都不会不覆盖。

以上几种事件绑定方式里面的this指向有点区别：

也比较好理解，IE独有的特殊一点指向window，其他都指向dom元素本身

封装一个兼容性的方法，用于绑定事件：

有的时候我们希望解除事件处理函数，那怎么办呢？

其实解除事件处理函数也对应有办法方法：

1. ele.onxxx = false / ' ' / null

2. ele.removeEventListener(type,fnName,false)

3. ele.attachEvent('on' + type,fnName)

值得注意的是：若干绑定的事件处理函数是匿名函数，则无法解除绑定！

不知道有没有发现，在上面绑定事件处理函数的时候，处理函数有个参数e或者叫event，其实是一个事件对象

事件对象就是处理函数里面的一个参数，说白了就是浏览器打包好的一个对象自动传入到处理函数的第一个参数中。

为了兼容IE一般这么写： e = e || window.event

事件对象会有个属性target，这个target叫事件源对象，记录可事件具体在谁身上触发的那个源头

同样IE上事件源对象是e.srcElement，谷歌两个都有

所以为了兼容IE一般获取事件源对象是这么来写：

当浏览器发展到第四代时(IE4及Netscape4)，浏览器开发团队遇到了一个很有意思的问题：页面的哪一部分会拥有某个特定的事件？想象画在一张纸上的一组同心圆。如果把手指放在圆心上，那么手指指向的不是一个圆，而是纸上的所有圆

两家公司的浏览器开发团队在看待浏览器事件方面还是一致的。如果单击了某个按钮，他们都认为单击事件不仅仅发生在按钮上，甚至也单击了整个页面

但有意思的是，IE和Netscape开发团队居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。事件冒泡和事件捕获称为两种事件处理模型

IE的事件流叫做事件冒泡(event bubbling)， 事件冒泡是结构上（非视觉上）嵌套的函数存在事件冒泡功能，即同一事件自子元素冒泡向父元素（自底向上）

[注意]所有现代浏览器都支持事件冒泡

但在具体实现在还是有一些差别。IE9、Firefox、Chrome、Safari将事件一直冒泡到window对象

而事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前就捕获它

即事件捕获是指： 结构上（非视觉上）嵌套的元素存在事件捕获功能，即同一事件自父元素冒泡向子元素（自顶向下）

注意IE上没有事件捕获，Chrome和新版本的Firefox等都实现了

一个dom元素的一个事件类型绑定的一个处理函数只能存在一种事件模型，要么事件冒泡要么事件捕获。正常的通过addEventListener(type,fn,false)绑定事件时，最后一个参数默认是false表示的是，事件冒泡模型。如果改成true，立即变成事件捕获模型

如果一个dom元素的一个事件类型绑定了两个处理函数，两个函数的事件处理模型一个是事件冒泡一个是事件捕获，触发顺序是先捕获，后冒泡。

focus、blur、change、submit、reset、select等事件类型不冒泡

可以 利用事件冒泡和事件源对象可以叫事件委托给父元素

利用事件冒泡和事件源对象进行处理

优点：

性能好，不需要循环所有元素一个个绑定事件

灵活，当有其他新的子元素时，不需要重新绑定事件。

有的时候，我们不希望有冒泡功能，那我们怎么取消事件冒泡呢？

封装一个都好使的取消冒泡函数

有的时候我们需要阻止一些浏览器默认的事件

比如：表单提交、a链接跳转、右键菜单等

有几种方式：

参考资料：

DOM事件流的三个阶段

深入理解DOM事件机制系列第一篇——事件流

JS事件汇总

JS事件模型

事件1（上）

事件1（下）

DOM级别与DOM事件

DOM事件机制解惑

事件模型

JavaScript 事件委托详解

JavaScript 事件的学与记：stopPropagation 和 stopImmediatePropagation

event.target和event.currentTarget的区别

js怎么区分出点击的是鼠标左键还是右键？

一、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的区别

原文： https://github.com/ljianshu/Blog/issues/44

最后：“相信有很多想学前端的小伙伴，今年年初我花了一个月整理了一份最适合2018年学习的web前端干货，从最基础的HTML+CSS+JS到移动端HTML5等都有整理，送给每一位前端小伙伴，53763，1707这里是小白聚集地，欢迎初学和进阶中的小伙伴。”

祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。