前言

当你的面试官问你事件触发的过程时，只是寥寥数句介绍一下，是无法让面试官对你印象深刻的。我们应该将其中的原理讲清楚，再谈谈与其相关的重要知识点，这才是面试官想听的！

1. 事件触发过程

JavaScript中的事件触发过程包括捕获过程和冒泡过程。这两个过程是事件流的两个阶段，从window对象开始，经过DOM层次结构，最终到达事件的目标元素。

1.1 捕获过程

在捕获过程中，事件从window对象往目标元素传播，遇到注册的捕获事件时触发。这个阶段提供了机会在事件到达目标前捕获和处理事件。

1.2 冒泡过程

冒泡过程是事件从目标元素往window对象传播的过程，遇到注册的冒泡事件时触发。冒泡过程允许在事件从目标元素冒泡到根节点的过程中进行处理。

注意： 捕获事件和冒泡事件是互斥的，即同一个事件不会既是捕获事件又是冒泡事件。

2. 阻止默认行为

在处理事件的过程中，有时我们希望阻止浏览器执行事件的默认行为，这时可以使用以下方法：

2.1 event.stopPropagation()

event.stopPropagation() 方法用于阻止事件的进一步传播。在捕获或冒泡阶段调用该方法后，事件将不再传播到其他元素，但仍然会在当前元素上触发。

2.2 event.stopImmediatePropagation()

event.stopImmediatePropagation() 方法不仅阻止事件的传播，而且会阻止同一元素上绑定的其他相同类型事件的执行。这个方法在确保不希望其他相同事件的监听器被执行时非常有用。

3. 事件代理（事件委托）

事件代理（或事件委托）是一种优化事件处理的方式，通过将事件绑定到父元素而不是每个子元素上，可以减少事件处理器的数量。

在事件代理中，通过判断事件的target属性，可以确定事件真正发生在哪个子元素上，从而执行相应的逻辑。这样可以有效减少DOM操作和提高性能，特别是在大型页面上。

document.getElementById('parentElement').addEventListener('click', function (event) { 
    if (event.target.tagName === 'LI') { // 处理点击 LI 元素的逻辑 
        console.log('Clicked on LI element:', event.target.textContent); 
    } 
});

当你的面试官问你事件的触发过程，你该如何回答？

前言