事件模型

一、事件与事件流

1. 事件

事件是与浏览器或文档交互的瞬间，如点击按钮，填写表格等，它是JS与HTML之间交互的桥梁。

2. 事件流

DOM是树形结构，如果同时给父子节点都绑定事件时，当触发子节点的时候，这两个事件的发生顺序如何决定?这就涉及到事件流的概念，它描述的是页面中接受事件的顺序。

事件流有两种:

• 事件冒泡(Event Bubbling): 是一种从下往上的传播方式。事件最开始由最具体的元素(文档中嵌套层次最深的那个节点接受, 也就是DOM最低层的子节点), 然后逐渐向上传播到最不具体的那个节点，也就是DOM中最高层的父节点。

• 事件捕获(Event Capturing): 与事件冒泡相反。事件最开始由不太具体的节点最早接受事件, 而最具体的节点最后接受事件。

二、事件模型

DOM2事件模型分为3个阶段：捕获阶段-目标阶段-冒泡阶段

• 第一阶段：从window对象传导到目标节点（上层传到底层），称- 为“捕获阶段”（capture phase）。
• 第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。
• 第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。

<div style="padding:50px;border:1px solid blue">
  <button>你好</button>
</div>
<script>
  let btn = document.querySelector("button")
  let div = document.querySelector("div")
  //true - 事件在捕获阶段执行
  //false - 默认。事件在冒泡阶段执行
  div.addEventListener("click",()=>{console.log(1)},true)
  btn.addEventListener("click",()=>{console.log(2)},true)
  div.addEventListener("click",()=>{console.log(3)},false)
  btn.addEventListener("click",()=>{console.log(4)},false)
</script>

  //点击button: 1,2,4,3

点击button :
捕获阶段：事件从<div>向<p>传播时，触发<div>的1事件；
目标阶段：事件从<div>到达<p>时，触发<p>的2,4事件；
冒泡阶段：事件从<p>传回<div>时，再次触发<div>的3事件。

三、事件委托

事件在冒泡过程中会上传到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件代理。

<ul>
  <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function (event) {
  //currentTarget指向事件绑定的元素，而target则是指向事件触发的元素。
  if (event.target.tagName.toLowerCase() === 'li') {
    console.log(event.target.textContent)
  }
});
</script>

参考：
https://juejin.im/post/5a94bbea5188257a6049bcc5
https://wangdoc.com/javascript/events/model.html
https://segmentfault.com/a/1190000006934031#articleHeader2