事件委托（利用冒泡）

事件委托（Event delegation）是一种常用的前端开发技巧，它是利用事件冒泡的原理来实现的。事件冒泡是指事件在触发元素后，会向上层元素传递，直到传递到文档根元素为止。例如，当我们点击一个按钮时，点击事件会先触发按钮的 click 事件，然后再向上层元素（如父元素、祖先元素等）逐级传递，直到传递到文档根元素。

利用事件委托，我们可以将事件处理程序绑定到父元素上，而不是绑定到每个子元素上。这样就可以避免在子元素数量较多时，绑定过多重复的事件处理程序，从而提高页面性能和代码可维护性。

例如，我们可以通过以下代码来实现当列表中的某个子元素被点击时，弹出对应的提示框：

<ul id="list">
  <li data-id="1">列表项 1</li>
  <li data-id="2">列表项 2</li>
  <li data-id="3">列表项 3</li>
</ul>

document.getElementById('list').addEventListener('click', function(event) {
  var target = event.target;
  while (target && target.nodeName !== 'LI') {
    target = target.parentNode;
  }
  if (target) {
    var id = target.getAttribute('data-id');
    alert('您点击了列表项 ' + id);
  }
});

上述代码中，我们将 click 事件处理程序绑定到父元素 ul 上，然后在事件处理程序中判断触发事件的元素是否为列表项，并获取列表项的 data-id 属性值，最后弹出对应的提示框。这样，无论何时我们添加或删除列表项，都不需要重新绑定事件处理程序，而只需要更新 ul 元素即可。