简介
事件代理 是一种 Javascript 编程技术，它利用了事件的冒泡机制将事件的监听器绑定到父元素上，而不是直接绑定在实际的子元素上。这种技术的核心是事件冒泡。当子元素上的事件被触发时，这个事件会沿着 DOM 树向上冒泡，最终被父元素捕获。事件代理的好处是能够减少直接绑定到元素的事件监听器的数量，从而提高性能和管理的便携性。
工作机制
以 DOM 元素为例，常见的事件如点击（click）、按键（keydown）等都可以通过事件代理来处理。当这些事件在目标元素（例如按钮、链接等）上触发时，它们会沿着 DOM 树向上冒泡，直到遇到一个相应事件监听器的父元素。事件代理正是利用这一个机制，通过在父元素上设置一个监听器来管理多个子元素的事件。
例如：
如果有一个列表，每个列表项需要点击事件，传统的方法是给每个列表项分别绑定事件监听器。而使用事件代理，我们只需在其父元素（如 < ul > 或< ol >）上绑定一次监听器即可。
应用场景
- 列表元素：当有大量的列表项，并且需要对每个列表项进行事件监听时，使用事件代理可以大幅减少内存占用。因为这只需要在父级元素上绑定单一的事件监听器。
- 动态内容：对于动态添加到页面的元素，如通过 ajax 加载的内容或用户操作生成的新元素，如果使用传统的事件绑定，每次添加新元素时都需要绑定新的事件监听器。事件代理允许我们把事件监听器绑定在一个永久存在的父元素上，从而避免重复绑定。
- 减少内存占用：在单页面应用（ SPA ）或大型项目中，页面可能包含成百上千个的元素，如果给每个元素都绑定事件监听器，会大量消耗内存。事件代理可以有效减少所需的事件监听器数量。
事件代理的优缺点
优点
- 减少内存占用，提升性能。
- 便于管理和维护，尤其是对动态添加的元素。
- 简化代码，减少重复的事件绑定操作。
缺点
- 不是所有的事件都可以冒泡，如 focus、blur，这些事件不能使用事件代理。
- 对于 mousemove 或 mouseout 这类频繁触发的事件，使用事件代理可能会导致性能问题，因为它们会在每次事件冒泡时都执行相关的处理函数。
- 需要在事件处理函数中进行额外的元素判断，以确保是对正确的子元素进行操作，这可能会增加代码的复杂度。
