1）事件冒泡

概念

给父标签和子标签都添加点击事件，当在子标签上方点击后同时也会触法父标签的点击事件，这就是事件冒泡。

image.png

阻止事件冒泡基本语法

标签对象.事件名 = function(e){
e.stopPropagation();
}

示例

  1. 阻止事件冒泡           
  3.     var obj2 = document.getElementById("font1");
  4.     obj2.onclick = function(event){
  5.     event.stopPropagation(); 
  6.     alert(2); 
  8. }
  9.    event.stopPropagation(); 在子标签的方法中设置阻止事件冒泡

2）事件代理

概念

事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown……）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。
image.png
如上图所示，事件传播分成三个阶段：

  • 捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件；

  • 目标阶段：在目标节点上触发，称为“目标阶段”

  • 冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；

    优点

    【1】可以大量节省内存占用，减少事件注册，比如在ul上代理所有li的click事件就非常棒
    【2】可以实现当新增子对象时无需再次对其绑定（动态绑定事件）
    image.png
    注意：
    使用“事件委托”时，并不是说把事件委托给的元素越靠近顶层就越好。事件冒泡的过程也需要耗时，越靠近顶层，事件的”事件传播链”越长，也就越耗时。如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致性能损失。