事件委托

概念

事件委托，将本来应该绑定到子元素的响应事件委托给父元素，让父元素担当事件监听的职务。

事件流

事件委托是基于DOM的事件流，我们看一下事件的三个阶段：
捕获阶段 --> 目标 --> 冒泡阶段

捕获阶段：从document传导到目标节点（上层到下层)，称为捕获阶段
目标阶段：在目标节点上触发
冒泡阶段：目标节点传导到document上层（下层到上层), 称为冒泡阶段。事件代理即是利用冒泡机制把所需要响应事件绑定到上层元素。

优点

利用事件冒泡，只指定一个事件处理程序，管理某一类型的所有事件

• 可以大量节省内存占用，减少事件注册，如ul上代理所有的li的click事件
• 当新增子元素时无需再次对其绑定事件，对于动态内容尤为合适

缺点

• 若层级过多，冒泡过程中，可能会被某层阻止掉
• 事件委托基于冒泡，对于不冒泡事件不支持
• 理论上委托会导致浏览器频繁调用处理函数，虽然可能不需要处理。所以建议就近委托，如在ul上代理li事件，而不是在document上代理li
• 使用“事件委托”时，并不是说把事件委托给的元素越靠近顶层就越好。事件冒泡的过程也需要耗时，越靠近顶层，事件的”事件传播链”越长，也就越耗时。如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致性能损失。