面试题答案
一键面试事件冒泡机制
- 冒泡原理：事件从触发元素开始，向上逐级传播到 DOM 树的根节点。在使用事件委托时，利用冒泡机制可以在祖先元素上监听事件，减少事件绑定数量。
- 委托层级选择：如果委托层级过低，虽然能精准捕获特定元素事件，但需要绑定较多事件处理程序，增加内存开销。例如在一个包含大量列表项的
<ul>中，如果给每个<li>都绑定点击事件，会占用大量内存。而委托层级过高，虽然事件绑定少，但可能捕获到许多不必要的事件，增加处理开销。比如在document上绑定点击事件，会处理页面所有元素的点击，即使很多点击并不是我们关心的。因此，选择一个合适的中间层级，例如<ul>元素，既能利用冒泡捕获所有<li>的点击事件，又不会处理过多无关事件。
事件处理函数复杂度
- 简单处理：若事件处理函数只是简单逻辑，如改变元素样式，那么委托层级可以相对高些。因为即使捕获到较多无关事件，处理这些简单逻辑的开销也较小。例如只是点击按钮改变按钮颜色，在父元素监听即可，无需在按钮自身绑定事件。
- 复杂处理：当事件处理函数包含复杂逻辑，如涉及大量计算、AJAX 请求等，应尽量降低委托层级。因为较高层级捕获无关事件时执行复杂逻辑会严重影响性能。比如点击某个特定表格单元格触发复杂的数据计算和后端请求，最好在单元格所在的
<tr>或<td>元素上委托，避免在更高层级捕获到其他不相关单元格的点击而执行复杂操作。
页面渲染性能
- 重排与重绘：频繁触发事件且事件处理导致页面布局或样式改变时，会引发重排和重绘，影响渲染性能。委托层级较高时，若频繁捕获无关事件并执行可能导致重排重绘的操作，会严重影响性能。例如在
document上监听点击并改变某个元素位置，每次点击都可能引发不必要的重排重绘。因此对于会影响页面布局样式的操作，委托层级应适当降低，减少无关事件触发此类操作的概率。 - 渲染阻塞：如果事件处理函数执行时间长，会阻塞渲染线程，导致页面卡顿。所以复杂的事件处理结合合理的委托层级，尽量减少对渲染的影响。可以通过将复杂操作放入
requestAnimationFrame或setTimeout等异步任务中，避免阻塞渲染。同时选择合适委托层级，减少无关复杂操作执行。
其他考虑因素
- 元素动态性：若页面中可点击元素是动态添加或移除的，较高的委托层级更合适。因为在较高层级绑定一次事件，新添加元素的事件也能被捕获，无需为新元素重新绑定事件。例如动态生成列表项，在
<ul>元素上委托点击事件，新生成的<li>点击也能被处理。 - 内存占用：委托层级低，事件绑定多，内存占用大；委托层级高，虽然事件绑定少，但捕获过多无关事件可能导致更多对象被引用，也影响内存。需平衡两者，根据页面实际情况，如元素数量、事件处理复杂程度等，选择合适层级，降低内存开销。