前端高级工程师面试题及答案.docxVIP

前端高级工程师面试题及答案

一、基础深度题（考察底层原理，避免死记硬背）

1.请说说事件冒泡和事件捕获的区别，实际开发中你是怎么利用或避免这两个机制的？

答案：核心区别在于事件触发的顺序和执行阶段不同。

事件捕获是“从外到内”：事件先由最顶层的父元素触发，再逐步向下传递到目标元素（比如document→html→body→目标div）；

事件冒泡是“从内到外”：事件先由目标元素触发，再逐步向上传递到最顶层的父元素（目标div→body→html→document）。

实际开发中的应用：

1.利用事件冒泡做事件委托（事件代理）：比如列表渲染时，不给每个列表项绑定点击事件，而是给父容器绑定，通过e.target判断点击的是哪个列表项，减少DOM事件绑定数量，提升性能（比如vue的v-for列表点击、表格行点击场景）。

2.避免事件冒泡/捕获的干扰：比如嵌套弹窗中，点击子弹窗的关闭按钮，不想触发父弹窗的关闭事件，就用e.stopPropagation()阻止冒泡；如果需要阻止事件的默认行为（比如a标签跳转、表单提交），用e.preventDefault()，注意两者的区别（stopPropagation阻止事件传递，preventDefault阻止默认行为，互不影响）。

补充：addEventListener的第三个参数（useCapture），true表