Window events
Basic example: closing a modal on escape
Use an EuiWindowEvent to safely and declaratively manage adding and auto-removing event listeners to the
window. This is preferable to setting up your own window event listeners because it will remove old listeners when your component unmounts, preventing you from accidentally leaving them around forever.
This modal example registers a listener on the keydown event and listens for ESC key presses, which closes the open modal.
Avoiding event conflicts
Be careful with global listeners
Since window event listeners are global, they can conflict with other event listeners if you aren't careful.
The safest and best way to avoid these conflicts is to use event.stopPropagation() at the lowest, most specific level where you are responding to a DOM event. This will prevent the event from bubbling up to the window, and the EuiWindowEvent listener will never be triggered, avoiding the conflict.
Tracking mouse position
For some DOM events, you have to listen on the window. One example of this is tracking mouse position. Below, when you click the toggle switch, your mouse position is tracked. When you toggle off, tracking stops.
If you were manually attaching window listeners, you might forget to remove the listener and be silently responding to mouse events in the background for the life of your app. The EuiWindowEvent component manages that unmount/unregister process for you.