What is JavaScript's CompositionEvent? Please give examples

Question

MDN is very vague about what the CompositionEvent means. There are no examples and the correlated events, such as compositionstart, compositionupdate and compositionend, als

Answer 1

CompositionEvent

Composition Events provide a means for inputing text in a supplementary or alternate manner than by Keyboard Events, in order to allow the use of characters that might not be commonly available on keyboard. For example, Composition Events might be used to add accents to characters despite their absence from standard US keyboards, to build up logograms of many Asian languages from their base components or categories, to select word choices from a combination of key presses on a mobile device keyboard, or to convert voice commands into text using a speech recognition processor. Refer to §5 Keyboard events and key values for examples on how Composition Events are used in combination with keyboard events.

Conceptually, a composition session consists of one compositionstart event, one or more compositionupdate events, and one compositionend event, with the value of the data attribute persisting between each stage of this event chain during each session.

Note: While a composition session is active, keyboard events can be dispatched to the DOM if the keyboard is the input device used with the composition session. See the compositionstart event details and IME section for relevent event ordering.

Not all IME systems or devices expose the necessary data to the DOM, so the active composition string (the Reading Window or candidate selection menu option) might not be available through this interface, in which case the selection MAY be represented by the empty string.

Refer: https://www.w3.org/TR/uievents/#events-compositionevents

Running the above HTML file, and composing an à on my Mac keyboard (Alt-`, a) I get the following results:

Gecko                         | Chromium                      | WebKit
----------------------------- | ----------------------------- | ---------------------------
`keydown`: 18                 | `keydown`: 18                 | `keydown`: 18
`keydown`: 192                | `keydown`: 229                | `compositionstart`: 0
`compositionstart`: undefined | `compositionstart`: undefined | `compositionupdate`: \`
`compositionupdate`: \`       | `compositionupdate`: \`       | `keydown`: 229
`compositionupdate`: à        | `keydown`: 229                | `compositionend`: à
`compositionend`: à           | `compositionupdate`: à        | `keydown`: 229
                              | `compositionend`: à           |

I'm using keyCode instead of key because WebKit. The differences between the keydown values are not that important. The difference in event order, and the fact that Firefox triggers no keydown after composition is initiated, Chrome gives you one in the middle, and Safari throws in an extra one at the end is fun!