useOn() / useOnDocument() / useOnWindow() - Programmatic Listeners
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:
|Add an event on specific event on current host element.|
|Add an event on specific event on document.|
|Add an event on specific event on window.|
Your task: Set up a click listener on the component to call
$ 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.