Added event types and their descriptions (#402)

* Added form types and their descriptions

I was looking for a complete list of form types and couldn't find any anywhere.
I went through the source code and extracted these with adding some description to them, either using MDN's description or some other website explanation.

* Apply suggestions from code review

Co-authored-by: swyx <[email protected]>

Author: TOP-10-DEV

docs/basic/getting-started/forms-and-events.md

@@ -98,3 +98,42 @@ If you don't quite care about the type of the event, you can just use React.Synt
 [View in the TypeScript Playground](https://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCtCAOwGctoRlM4BeRYmAOgFc6kLABQBKClVoM4AMSbs4o9gD4FFOHAA8mJmrhFMbAN7aozJJgC+u2gGVeAIxDAYRoUgBcndDxsBPGjAAFkgwwGgAogBuSAEiynCGuupI3GBE0QEAIuYovAA2MKIA3Elw1PTwMChQAOYh8ilVtfUodHAwvmBIEKyN1XXwAGQJpckgKMB5noZwkSh5vB5wDFDANDVwFiXk6rtwYK10AO7QACbTs-OLnitrG1ulDzu75VJI45PyTQPc7xN53DmCyQRTgAHowe1Okg0ME0ABrOgAQlKr3gBzoxzOX36IVShxOUFOgKuIPBkI6XVhMMRKOe6ghcBCaG4rN0Fis5CUug0p2AkW59M0eRQ9iQeUFe3U4Q+U1GmjWYF4lWhbAARH9Jmq4DQUCAkOrNXltWDJbsNGCRWKJTywXyBTz7Wb1BoreLnbsAAoEs7ueUaRXKqFddUYrFE7W6-Whn0R8Eei1um3PC1Ox38hOBlUhtV0BxOGDaoGLdUAGQgGzWJrNqYzFAtJhAgpEQA)
 
 Of course, if you're making any sort of significant form, [you should use Formik](https://jaredpalmer.com/formik) or [React Hook Form](https://react-hook-form.com/), which are written in TypeScript.
+
+### List of event types
+
+
+| Event Type  | Description                                                                                                                   |
+| ---------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| AnimationEvent   | CSS Animations.                                                                                                               |
+| ChangeEvent      | Changing the value of `<input>`, `<select>` and `<textarea>` element.                                                         |
+| ClipboardEvent   | Using copy, paste and cut events.                                                                                             |
+| CompositionEvent | Events that occur due to the user indirectly entering text (e.g. depending on Browser and PC setup, a popup window may appear with additional characters if you e.g. want to type Japanese on a US Keyboard)                                                                                                                           |
+| DragEvent        | Drag and drop interaction with a pointer device (e.g. mouse).                                                                 |
+| FocusEvent       | Event that occurs when elements gets or loses focus.                                                                          |
+| FormEvent        | Event that occurs whenever a form or form element gets/loses focus, a form element value is changed or the form is submitted. |
+| InvalidEvent     | Fired when validity restrictions of an input fails (e.g `<input type="number" max="10">` and someone would insert number 20). |
+| KeyboardEvent    | User interaction with the keyboard. Each event describes a single key interaction.                                            |
+| MouseEvent       | Events that occur due to the user interacting with a pointing device (e.g. mouse)                                             |
+| PointerEvent     | Events that occur due to user interaction with a variety pointing of devices such as mouse, pen/stylus, a touchscreen and which also supports multi-touch. Unless you develop for older browsers (IE10 or Safari 12), pointer events are recommended. Extends UIEvent.                                                                                                                       |
+| TouchEvent       | Events that occur due to the user interacting with a touch device. Extends UIEvent.                                                                                                                           |
+| TransitionEvent  |  CSS Transition. Not fully browser  supported. Extends UIEvent                                                                                                                             |
+| UIEvent          |  Base Event for Mouse, Touch and Pointer events.                                                                                                                             |
+| WheelEvent       | Scrolling on a mouse wheel or similar input device. (Note:  `wheel` event should not be confused with the `scroll` event)                                                                                                                              |
+| SyntheticEvent   |  The base event for all above events. Should be used when unsure about event type                                                                                                                           |
+
+<details>
+<summary>
+
+**What about `InputEvent`?**
+
+</summary>
+
+You've probably noticed that there is no `InputEvent`. This is because it is not supported by Typescript as the event itself has no fully browser support and may behave differently in different browsers. You can use `KeyboardEvent` instead.
+
+Sources:
+
+ - https://github.com/microsoft/TypeScript/issues/29441
+ - https://developer.mozilla.org/en-US/docs/Web/API/InputEvent
+ - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
+
+</details>