在 Angular 4 中，事件冒泡是一种事件传播机制，当一个元素上的事件被触发时，该事件会沿着DOM树向上传播直到根元素。这意味着如果一个子元素上的事件被触发，它的父元素也会收到该事件。
事件冒泡的原理
事件冒泡是基于 DOM 的事件传播机制。当一个事件在DOM元素上触发时，首先会在触发该事件的元素上执行相应的事件处理函数，然后事件会向上冒泡到父元素，依次执行父元素上的事件处理函数，直到根元素。
阻止事件冒泡
在 Angular 4 中，我们可以通过调用事件对象的 stopPropagation() 方法来阻止事件冒泡。例如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- --------------
--------- -
---- ------------------------------
------- ---------------------------------------- -----------
------
-
--
------ ----- ---------------- -
------------------- -
------------------- ----- ----- ------------
-
----------------------- ----------- -
------------------------
------------------ ----- ----- ------------
-
-在上面的示例中，当点击按钮时，会触发子元素的点击事件处理函数 handleChildClick()，并且调用事件对象的 stopPropagation() 方法来阻止事件冒泡，因此父元素的点击事件处理函数 handleParentClick() 不会被执行。
事件委托
事件委托是一种利用事件冒泡机制来优化事件处理的技术。通过将事件处理函数绑定到父元素上，当子元素触发事件时，事件会冒泡到父元素并被父元素处理。这样可以减少事件处理函数的数量，提高性能。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- --------------
--------- -
--- ----------------------------------
-------- ------
-------- ------
-------- ------
-----
-
--
------ ----- ---------------- -
---------------------- ----------- -
-- ------------- ---------- -------------- -
-------------------- ------- --------------------------
-
-
-在上面的示例中，我们将点击事件处理函数绑定到父元素 <ul> 上，当点击列表项 <li> 时，事件会冒泡到父元素并被父元素处理，然后通过判断事件的目标元素来确定点击的是哪个列表项。
事件冒泡是 Web 开发中非常重要的概念，掌握了事件冒泡的原理和应用，能够更好地处理复杂的交互逻辑。