【JS】事件委托和事件循环

事件委托

1.1 什么是事件

用户或者浏览器自己执行的某种动作，是文档或者浏览器发生的一些交互瞬间，比如点击（click）、指针悬浮（mouseover）、提交（submit）等，这是JavaScript 与 HTML 交互的基础，要实现用户与页面的交互，需要先对目标元素绑定特定的事件以及设置事件处理函数，然后用户触发事件执行事件处理函数，最后产生交互效果。
适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress

1.2 什么是事件对象

在触发DOM上的某个事件的时候，会产生一个事件对象event，而在这个对象当中会包含着所有与事件有关的信息。

1.3 什么是事件流

一个完整的事件流是从window开始，最后回到window的一个过程；
事件流被分为3个阶段：1-5捕获阶段（由外往内），5-6目标阶段，6-10冒泡阶段（由内往外）。

事件传播的最上层对象是window，在捕获阶段依次为window、document、html、body、父节点、目标节点；在冒泡阶段依次为目标节点、父节点、body、html、document、window。

一个事件被触发时，浏览器会自动从用户操作标签外的最上级标签逐渐向里检查是否有相同事件，如果有则触发，如果没有则继续向下检查直到用户操作的标签，这过程称为捕获，此时浏览器会继续由用户操作标签继续向上级标签检查，如果有相同事件则触发，如果没有则继续向上检查直到最上级元素为止，这过程称为冒泡。

1.4 默认情况下，事件是在冒泡阶段执行还是捕获阶段执行

默认的执行事件是在冒泡阶段执行的。这也是为什么当父类和子类都绑定了某个事件，会先调用子类绑定的事件，后调用父类的事件。

1.5 事件委托原理和使用场景(注意兼容)

事件委托：将元素的事件委托给它的父级或者更外级的元素处理，它的实现机制就是事件冒泡。
好处：通过事件委托可以减少子元素的事件绑定次数，提高页面的性能；动态新增的元素不需要重新绑定事件。
使用场景：如果我们有⼀个ul列表，列表里面有⼤量的li，我们需要在点击li的时候响应⼀个事件，如果给每个li都绑定⼀个事件，那对于内存消耗是⾮常⼤的，这时候就可以事件委托，把点击事件绑定在⽗级元素ul上⾯，然后执⾏事件的时候再去匹配⽬标元素。

<ul id="list">
  <li>苹果</li>
  <li>香蕉</li>
  <li>香梨</li>
  <li>草莓</li>
</ul>

<script>
// 给⽗层元素绑定事件
document.getElementById('list').addEventListener('click', function (ev) {
  //兼容性处理
  var ev = ev || window.event;
  var target = ev.target || ev.srcElement;
  console.log(ev);//事件对象MouseEvent
  console.log(target);//被点击的li的元素节点
  //判断是否匹配⽬标元素
  //nodeName获取到的li元素默认是大写，.toLowerCase()把字符串转换为小写
  if (target.nodeName.toLowerCase() === "li") {
    target.style.background = "red";
    console.log(target.innerHTML);
  }
});
</script>

事件循环(事件代理)

解析单线程、主线程、执行栈、同步任务异步任务（宏任务和微任务）
所有任务(js代码)都会被放入到执行栈中，等待主线程执行。
所有任务执行顺序：先执行所有的同步任务，再执行微任务，最后再执行宏任务。

单线程：
js是单线程的，所有任务都需要排队，前一个任务结束，才会执行后一个任务。
如果有一些耗时的交互，就需要有个先后顺序，由此引入了事件队列。

执行栈：
js执行栈是先进后出，后进先出的数据结构，当函数被调用时，会被添加到栈中的顶部，执行完成之后就从栈顶部移出该函数，直到栈内被清空。

同步任务（非耗时任务）和异步任务（耗时任务）：
同步任务：在主线程上排队执行的任务只有前一个任务执行完毕，才能执行后一个任务，形成一个执行栈。
异步任务（有两种宏任务和微任务）：不进入主线程，而是进入任务队列，当主线程中的任务执行完毕，就从任务队列中取出任务放进主线程中来进行执行。
宏任务：setTimeout，setInterval，ajax，Dom事件回调
微任务：process.nextTick(Node独有)，Promise.[then/catch/finally]，async/await
执行顺序：微任务比宏任务的执行时间要早

微任务全部拉入执行栈，宏任务一次拉一个。
栈是先进后出，队列是先进先出。
定时器时间设置为0s，并不会立即执行。
规则：如果Promise.then里面是setTimeout的话会先不执行setTimeout语句，先把其他setTimeout宏任务中的微任务全部执行完，最后再来执行宏任务。

回答：
因为js是单线程的，同一时间只能做一件事情，所以所有的任务都需要排队。js执行的线程就称为主线程，当主线程执行的时候，遇到同步任务就直接运行，遇到异步任务会创建任务队列把异步任务放到队列里面。当同步任务执行完成以后，再去执行任务队列中的异步任务。异步任务又分为宏任务和微任务，微任务会创建一个微任务队列，宏任务会创建宏任务一个队列，会先把微任务全部放到执行栈中执行，最后再从宏任务队列中取出一个放入执行栈中执行，执行完后，再取一个，直到执行完所有的宏任务。当任务执行完以后，重复这样的查找执行，整个这个过程和机制，称为js的事件循环。