事件流和事件代理/委托

EventsFlow.md

#事件代理/委托 ##事件流 事件流分为两类，IE6的冒泡事件流和非IE6的捕获事件流。 ##IE冒泡事件流 冒泡的这种相对简单一些，就是子元素触发一个特定事件，然后这个事件发生后会不怕事大的一直向上层父组件进行传递广播，最终传递到HTML标签的document为止。 ##捕获事件流 与冒泡相比，捕获事件流相对就多了些内容。触发事件的这个子元素它是整个事件传播过程的中点，始发于document（html标签）对象，经过一系列父组件到达惹事的子元素标签处，然后就原路返回。 所以整个捕获事件流可以分为三个部分：

捕获阶段 --> 目标阶段(在触发事件的节点上，会发生两次) -->冒泡阶段

#事件委托 我对于事件委托的理解就是通过使用捕获事件流机制，将原本要放在子节点身上的事情一股脑的扔给他爹。然后在子节点犯事的时候，他爹通过去向下追寻他时候顺带把我们需要子节点要完成的事情告诉他，然后该子节点会在目标阶段的第二次事件流时触发委托事件。 下面给出个例子代码：

##HTML

<ul class='nav'>
  <li class='home'>Home</li>
  <li class='pages'>Pages</li>
  <li class='history'>History</li>
  <li class='about'>AboutMe</li>
</ul>

##JS

let ul = document.querySelector('.nav');

ul.addEventListener('click', (e)=>{
  let target = e.target;
  if(target&&target.nodeName.toUpper() === 'LI'){
    alert(`${target.className} has been clicked ..`);
  }
});