什么是事件的冒泡？如何阻止冒泡？事件冒泡和什么相挂钩？事件委托的优势与应用场景是什么？

什么是事件的冒泡？如何阻止冒泡？事件冒泡和什么相挂钩？事件委托的优势与应用场景是什么？

1.什么是事件的冒泡？

事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

<div>
　　<p>元素</p>
</div>

当两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，p先触发了click，然后div再触发click，这就是冒泡

2.如何阻止冒泡？

dom0事件:

高级浏览器:两种方案

• event .stopPropagation
  

• event  = event || window.event;
  event .cancelBubble = true;
  

低级浏览器:一种

• event = event || window.event;
  event.cancelBubble = true;
  

dom2事件：

高级浏览器：两种方案

• event.stopPropagation
  

• event = event || window.event; 
  event.cancelBubble = true;
  

低级浏览器:一种

• event = event || window.event; 
  event.cancelBubble = true;
  

3.事件冒泡和事件委托相挂钩，事件委托的优势以及应用的场景是什么？

​ 事件流的都会经过三个阶段：捕获阶段 -> 目标阶段 -> 冒泡阶段，而事件委托就是在冒泡阶段完成.

事件委派概述：

​ 事件委派其实是借用事件冒泡去做的，因为事件冒泡导致内部所有的元素发生事件都会冒泡到祖先身上，我们不在子元素身上去添加事件监听和处理，而是在共同的祖先身上去添加，让祖先去处理子元素发生的事件；祖先去处理其实就是通过事件对象当中的target 去获取到真正发生事件的子元素；对子元素进行处理

事件委派的做法：

​ 给父元素添加事件监听，不给元素本身添加，事件发生后通过event.target去找真正发生事件的目标元素进行处理

事件委派的好处：

• 可以大大降低内存的占用，并且可以提高效率。

• 动态绑定，减少重复工作

应用的场景：

​ 1.一个列表之中有大量的列表项

​ 2.列表项不多，但需动态的增加或者去除列表项元素