简述

事件就是用户或者浏览器自己执行的某种动作，列如用户用鼠标点击一个网页上的按钮这个事件称为点击事件（click）。JS通过事件来和HTML进行交互，DOM支持大量事件。

事件流

DOM是树形结构，当我们在页面上单击一个按钮，页面上的哪些元素会触发这个事件，是发生在这个按钮上还是按钮的父元素|容器元素也会触发这个事件，如果两者都会触发那么两者谁先谁后呢？这个就是事件流。而触发的先后顺序就要看是采用的哪种类型的事件流。

1、事件冒泡

事件冒泡最初是IE浏览器的事件流，事件是由最具体的元素接收然后逐层向上传递直到传播至，就好像一个气泡从水中向上飘一样。Chrome浏览器则会冒泡至window对象。

2、事件捕获

事件捕获是Netscape（网景）浏览器开发团队提出来的，它与IE的规则完全相反，它是从document对象逐层向下传递到最具体的节点。

3、W3C规范下的事件流

早期开发者面对全球占比最大的IE浏览器和网景浏览器因为事件流的不同导致网站只能针对某一个浏览器进行设计，这对于开发者来说是一个严重的拖累，因此W3C之后制定了一个标准：一个事件在未设定采用哪种类型的事件流时会默认先进行事件捕获，再进行事件冒泡。事件监听语法 .addEventlistener('click',fn,bool)

事件捕获与事件冒泡的原型图

取消冒泡

捕获不可以取消，冒泡可以

e.stopPropagation()可以中断冒泡，浏览器不再向上监听，一边用于封装某些独立的组件。

不可取消冒泡事件

scroll event不可

事件委托

简述

事件委托就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素。

一般来说如果需要监听多个元素时会将元素的事件绑定到父元素（或者更外层元素），真正绑定事件的是外层元素，然后再通过事件冒泡触发该事件，从而触发事件函数。

举个例子：ABCD四个人在同一个宿舍都点了外卖，当外卖送到宿舍门口时，只需要四个人中的一个人列如A去拿这四份外卖然后进入宿舍之后再划分外卖即可。在这个流程中ABCD四个人是需要操作的四个DOM元素，拿外卖是一个事件，出去的拿外卖的A就是代理的元素，真正的事件是绑定到代理元素上的。最后划分外卖则是事件执行中，需要判断的当前需要响应的元素应该匹配到代理元素的哪一个（些）。

事件委托主要优点有：

1、节省监听的数量

2、可以监听动态生成的元素