docs: Update 06-component-directives.md on:event clarification

Problem 1: The events emitted/forwarded were not listened for.
Fix 1: Changed event names to show consistency amongst examples

Problem 2: Why events need to be forwarded is unclear (on this page). `createEventDispatcher` docs does mention custom events dont bubble. But components also cannot listen to DOM events that do bubble. 
Fix 2: Clarified that components only listen to event from their direct children

documentation/docs/02-template-syntax/06-component-directives.md

@@ -28,15 +28,17 @@ Components can emit events using [`createEventDispatcher`](/docs/svelte#createev
 Listening for component events looks the same as listening for DOM events:
 
 ```svelte
-<SomeComponent on:whatever={handler} />
+<SomeComponent on:hello={helloHandler} on:click={clickHandler} />
 ```
 
 As with DOM events, if the `on:` directive is used without a value, the event will be forwarded, meaning that a consumer can listen for it.
 
 ```svelte
-<SomeComponent on:whatever />
+<SomeComponent on:hello on:click />
 ```
 
+> Components can only listen to events forwarded by their direct child components or elements.
+
 ## --style-props
 
 ```svelte