docs: document event bubbles

docs/reference/glossary.md

@@ -67,6 +67,31 @@ title: Glossary
   </p>
 </section>
 
+<section id="bubbling">
+  <a href="#bubbling">
+    <h3>Bubbling</h3>
+  </a>
+  <p>
+    Bubbling is a way of propagating events in the DOM. With bubbling, the event is first captured by the innermost
+    element and then propagated upwards.
+  </p>
+  <p>
+    Many Ionic components emit events of the same name that also bubble. For example, <code>ionChange</code> is an event
+    emitted by several components such as <code>ion-radio-group</code>, <code>ion-input</code>, and more. Developers can
+    check the <code>target</code> property on the event to see the component that the event originated from.
+  </p>
+  <p>
+    See{' '}
+    <a
+      href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling"
+      target="_blank"
+    >
+      MDN's Introduction to events guide
+    </a>{' '}
+    for more information on bubbling.
+  </p>
+</section>
+
 <section id="bundling">
   <a href="#bundling">
     <h3>Bundling</h3>

plugins/docusaurus-plugin-ionic-component-api/index.js

@@ -168,7 +168,7 @@ function renderEvents({ events }) {
   }
 
   return `
-| Name | Description | Bubbles |
+| Name | Description | [Bubbles](../reference/glossary#bubbling) |
 | --- | --- | --- |
 ${events.map((event) => `| \`${event.event}\` | ${formatMultiline(event.docs)} | \`${event.bubbles}\` |`).join('\n')}`;
 }