事件冒泡

在 Angular 4 中，事件冒泡是一种事件传播机制，当一个元素上的事件被触发时，该事件会沿着DOM树向上传播直到根元素。这意味着如果一个子元素上的事件被触发，它的父元素也会收到该事件。

事件冒泡的原理

事件冒泡是基于 DOM 的事件传播机制。当一个事件在DOM元素上触发时，首先会在触发该事件的元素上执行相应的事件处理函数，然后事件会向上冒泡到父元素，依次执行父元素上的事件处理函数，直到根元素。

阻止事件冒泡

在 Angular 4 中，我们可以通过调用事件对象的 stopPropagation() 方法来阻止事件冒泡。例如：

------ - --------- - ---- ----------------

------------
  --------- --------------
  --------- -
    ---- ------------------------------
      ------- ---------------------------------------- -----------
    ------
  -
--
------ ----- ---------------- -
  ------------------- -
    ------------------- ----- ----- ------------
  -

  ----------------------- ----------- -
    ------------------------
    ------------------ ----- ----- ------------
  -
-

在上面的示例中，当点击按钮时，会触发子元素的点击事件处理函数 handleChildClick()，并且调用事件对象的 stopPropagation() 方法来阻止事件冒泡，因此父元素的点击事件处理函数 handleParentClick() 不会被执行。

事件委托

事件委托是一种利用事件冒泡机制来优化事件处理的技术。通过将事件处理函数绑定到父元素上，当子元素触发事件时，事件会冒泡到父元素并被父元素处理。这样可以减少事件处理函数的数量，提高性能。

------ - --------- - ---- ----------------

------------
  --------- --------------
  --------- -
    --- ----------------------------------
      -------- ------
      -------- ------
      -------- ------
    -----
  -
--
------ ----- ---------------- -
  ---------------------- ----------- -
    -- ------------- ---------- -------------- -
      -------------------- ------- --------------------------
    -
  -
-

在上面的示例中，我们将点击事件处理函数绑定到父元素 <ul> 上，当点击列表项 <li> 时，事件会冒泡到父元素并被父元素处理，然后通过判断事件的目标元素来确定点击的是哪个列表项。

事件冒泡是 Web 开发中非常重要的概念，掌握了事件冒泡的原理和应用，能够更好地处理复杂的交互逻辑。