Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions packages/docs/src/pages/tutorial/events/document/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,16 @@ title: Listening to document/window
layout: tutorial
---

So far, we have shown you how to listen to events emitted from a DOM element such as a `<button>`. But what if you need to listen for an event on `window` or `document` (for example, a `mousemove` or `scroll` event.)
So far you've interacted with events emitted from a DOM element such as a `<button>`, but what if you need to listen for global events?

Qwik has `document:` and `window:` namespace prefixes which allow you to listen to global events.
Common global events include the `document`'s `mousemove` and the `window`'s `scroll` event.

Notice that moving the mouse updates the position. However, this only works while moving over the text. That is because when the mouse is moved over an area other than text, the event does not bubble through the listener.
Qwik has the `document:` and `window:` namespace prefixes which allow you to listen to global events.

To fix this, change the listener to be a global listener by adding `document:` prefix.
Open the browser's console and move your mouse over the text in the sample. Notice how moving the mouse logs the mouse position to the console. This logging only happens while moving the mouse over the text because the event is wired on the `div`'s `onMouseMove` event. Attaching at this level stops event bubbling beyond the element's listener.

Now notice that moving the mouse anywhere on the application (even outside of the text) will show output in the console.
How would you adjust the code to log the mouse position at all times?

Change to a global listener by adding the `document:` prefix to the `onMouseMove` declaration.

With this change, notice how moving the mouse anywhere on the application (even outside of the text) shows output in the console.