document.getElementById('outer').addEventListener('click', () => { console.log('outer clicked'); });

rong>事件委托</strong>是一种利用事件冒泡机制，在父元素上监听子元素事件的技术。它特别适合动态内容或大量相似元素的场景。</p>
<p>比如有一个无序列表，每个li都有点击需求。传统做法是给每个li绑定事件，但如果列表项很多或频繁增删，这种方式效率低且浪费资源。</p>
<p>使用事件委托：</p>
<font style="color:#666">```html
<ul id="list">
  <li>条目1</li>
  <li>条目2</li>
  <li>条目3</li>
</ul>
```</font>
<font style="color:#666">```j*ascript
document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    console.log('点击了:', e.target.textContent);
  }
});
```</font>
<p>只需要一个事件监听器，就能处理所有li的点击。e.target指向实际被点击的元素，通过判断可以精确响应。</p>
<p>这种做法减少了DOM操作和内存占用，也自动支持动态添加的元素。</p>

<H3>阻止事件传播与默认行为</H3>
<p>有时需要中断冒泡或捕获流程。可以使用以下方法：</p>
<ul>
  <li><strong>e.stopPropagation()</strong>：阻止事件继续向上冒泡或向下捕获</li>
  <li><strong>e.stopImmediatePropagation()</strong>：除了阻止传播，还阻止当前元素上其他同类型监听器执行</li>
  <li><strong>e.preventDefault()</strong>：阻止元素的默认行为（如链接跳转、表单提交）</li>
</ul>
<p>例如，防止外层div响应点击：</p>
<font style="color:#666">```j*ascript
document.getElementById('inner').addEventListener('click', (e) => {
  e.stopPropagation();
  console.log('inner clicked, no bubble');
});
```</font>
<p>这时点击inner，outer的事件不会被触发。</p>

<p>基本上就这些。掌握事件的三个阶段和委托机制，能让事件处理更灵活、高效。实际开发中，冒泡用得最多，委托是优化关键，而捕获则适用于特定控制场景。</p>