Programmatic Listeners | Tutorial

There are times when your app needs to add a conditional listener. Sometimes a listener name is unknown, or you need to use an imperative approach to set up a listener.

Qwik provides the following functions to attach a listener:

Function	Description
useOn()	Listen to events on the current component's root element.
useOnDocument()	Listen to events on the document object.
useOnWindow()	Listen to events on the window object.

Your task: Set up a click listener on the component to call alert('Hello world!').

Understanding the $

The $ function signals Qwik to lazy load a reference. When setting up a listener with useOn, the second argument is a Qwik URL.

Qwik URLs (QRL) are lazy-loadable references to your code. If useOn took a function directly rather than QRL, it would have to eagerly execute to allocate the listener closure. By using a QRL via the $ function, Qwik can lazy load the closure only as click listener is triggered.