From 5109e2ae2f1514c8ac9f07914d9809b9b5adb418 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 9 Jun 2023 12:33:53 -0400 Subject: [PATCH] chore(fundamentals): clarify events (#2992) --- docs/core-concepts/fundamentals.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/core-concepts/fundamentals.md b/docs/core-concepts/fundamentals.md index 97a09499934..a409e57bc0b 100644 --- a/docs/core-concepts/fundamentals.md +++ b/docs/core-concepts/fundamentals.md @@ -45,3 +45,9 @@ Projects such as CapacitorCSS which allows us to take advantage of the flexibility that CSS properties (variables) provide. This makes it incredibly easy to design an app that looks great while following the web standard. We provide a set of colors so developers can have some great defaults, but we encourage overriding them to create designs that match a brand, company or a desired color palette. Everything from the background color of an application to the text color is fully customizable. More information on app theming can be found in [Theming](../theming/basics.md). + +## Events + +Many Ionic components use [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) to inform developers of important state changes in the components. For example, an `ion-datetime` component will emit `ionChange` whenever the selected date has changed. + +Developers can use standard events such as `click` as they normally would. However, many events emitted within a component's [shadow root](../reference/glossary.md#shadow) will be [retargeted](https://dom.spec.whatwg.org/#retarget) to the host element. This may result in multiple `click` handlers executing even if the user only clicked once. As a result, developers should rely on Ionic's events to be properly informed of state changes on Ionic components. Ionic's events are prefixed with `ion` to avoid collisions with standard events. Each component's documentation page has a list of available events that developers can listen for in their applications.