事件

事件就是用户或者浏览器进行的特定行为，比如：鼠标点击事件。

事件名称

比如：click就是一个事件名。

事件流的执行过程

事件流：指的是 DOM 事件流（多个事件按照一定顺序执行），DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。 事件流的执行过程：从window开始，最后回到window。 事件流被分为三个阶段：事件捕获（1-5），事件触发（5-6），事件冒泡（6-10）。

来自网上的图片：

事件冒泡

来自百度的解释：

当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。

就比如：我们用button产生一个click事件，但是由于button按钮本身可能不能处理这个事件，就要开始传播出去这个事件。 实现事件冒泡的条件是：元素之间有嵌套，每个元素都有相同的事件，这样当最里层的事件触发时，这个事件就会一级一级向上传播，也就是”冒泡“。

举个例子：在一个div里面嵌套另一个div，两个div都绑定了相同的事件监听函数click。这样，当里层点击事件触发时，外层的点击事件也会被触发。

<div id="outer">
 <div id="inner">
 </div>
</div>

<script>
 window.onload = function () {
   let inner = document.getElementById('inner')
   let outer = document.getElementById('outer')
   inner.addEventListener('click', function (e) {
     console.log('inner');
   })
   outer.addEventListener('click', function () { 
     console.log('outer');
   })
 }
</script>

结果为：

阻止事件冒泡

• 一般浏览器：event.stopPropagation()
• IE浏览器：event.cancelBubble = true

阻止默认事件

• 一般浏览器：event.preventDefault()
• IE浏览器：event.returnValue = false

addEventListener的第三个参数

addEventListener方法用于将事件和函数进行绑定，函数为：addEventListener(event, fn, useCapture)，这些参数分别是：事件名，事件处理函数，第三个参数 useCapture 是一个布尔值，用来设置该事件的执行是在哪个阶段发生的（默认是在冒泡阶段）。

• true：表示该事件是在“事件捕获阶段”触发的。（由外向内）
• false：表示该事件是在“事件冒泡阶段”触发的。（由内向外）

举个例子：在一个div里面嵌套另一个div，两个div都绑定了相同的事件监听函数click。

将第三个参数设置为true，事件在 捕获阶段 执行：

<div id="outer">
 <div id="inner">
 </div>
</div>

<script>
 window.onload = function () {
 let inner = document.getElementById('inner')
 let outer = document.getElementById('outer')
 inner.addEventListener('click', function (e) {
 console.log('inner');
 }, true)
 outer.addEventListener('click', function () { 
 console.log('outer');
 }, true)
 }
</script>

由于是 捕获阶段 执行，即：由外向内执行，所以结果为： outer inner。

结果为：

将第三个参数设置为false，事件在 冒泡阶段 执行，输出结果为： inner outer。

事件处理函数/事件监听函数

事件触发后的处理函数。如：btn.onclick = fn，fn就是事件处理函数/事件监听函数。

HTML事件处理程序

例如：

<button onclick = "fn()">click</button>

这种方式的缺点是：结构和行为耦合在一起。

DOM0级事件处理程序

形式为：ele.on + ‘事件名称’ = 事件处理函数 例如： ele.onclick = function() {…}，this指向当前元素。

DOM2级事件处理程序

这种方式主要是通过这两个方法：addEventListener()，removeEventListener() 这种方式的优点就是：可以同一个事件处理程序绑定多个事件处理函数。

事件委托

事件委托要处理的问题是：解决事件处理程序过多的问题。简单来说，就是将很多个事件处理程序委托给一个事件处理程序，通过这个事件处理程序来管理这么多个事件处理程序。 好处：减少对DOM的访问，提高性能；可以对后来添加进来的元素也能绑定委托事件。

例如：在一个 ul 标签中有很多个 li 标签，我们的需求而是点击每一个 li 标签显示每一个 li 标签的内容。 如果没有使用事件委托，我们需要给每一个 li 标签都添加事件监听函数，很明显，这样的效率并不高，而且对整个网页的性能也会影响；如果我们使用事件委托，将这些 li 的事件委托给 ul 标签，这样就可以只用一个事件监听函数实现。

代码如下：

<ul id="list"> 
 <li>111111</li>
 <li>222222</li>
 <li>333333</li>
 <li>444444</li>
</ul>

<script>
 window.onload = function () { 
 // 传统的方法
 // let lis = document.getElementsByTagName('li')
 // console.log(lis);
 // for(let i = 0; i < lis.length; i++){
 //     lis[i].addEventListener('click', function () { 
 //         console.log(this.innerHTML);
 //     })
 // }
 // 使用事件委托
 let list = document.getElementById('list')
 list.addEventListener('click', function (e) { 
   let target = e.target
   console.log(target.innerHTML);
 }, false)
 }
</script>

事件委托一般使用的是 事件冒泡阶段 进行（虽然事件捕获阶段也可以），因为事件冒泡的事件流模型被所有的主流浏览器兼容，事件冒泡的兼容性更好。