冒泡事件是什麼意思

"冒泡事件"（Bubbling Event）是JavaScript中的一個概念，它指的是事件在DOM樹中從子元素向父元素傳播的過程。

在HTML中，事件通常發生在特定的元素上，比如點擊一個按鈕。但是，如果這個按鈕是一個嵌套元素的一部分，比如它在一個表格的單元格中，那麼事件不僅會在按鈕上觸發，還會在其父元素（表格單元格）上觸發，然後繼續向上傳播到表格行、表格列，最後到表格本身。這就是冒泡事件的工作方式。

冒泡事件允許事件處理程式在不同的元素層次上被觸發，這樣開發者就可以在多個層次上捕獲和處理事件。如果想在某個層次上阻止冒泡，可以使用stopPropagation()方法。

例如，考慮以下HTML結構：

<div id="container">
  <div id="child">Click me!</div>
</div>

當點擊#child元素時，事件會先在#child上觸發，然後冒泡到#container。如果我們在#container上有一個事件處理程式，它也會被觸發。

document.getElementById('container').addEventListener('click', function(event) {
  console.log('The container was clicked.');
  event.stopPropagation(); // 阻止事件繼續冒泡到document
});

document.getElementById('child').addEventListener('click', function(event) {
  console.log('The child was clicked.');
});

在上面的例子中，當點擊#child時，控制台會先輸出「The child was clicked.」，然後是「The container was clicked.」。如果我們取消注釋event.stopPropagation()，那麼只會輸出「The child was clicked.」，因為事件在到達#container之前就被阻止了。

什麼意思網

冒泡事件是什麼意思