监听事件

任何框架的关键功能之一是简化用户事件的监听。

Qwik 可以通过在订阅相应浏览器事件的元素上放置 on<Eventname>$ 属性来监听各种事件。

您的任务是在 <button> 元素上添加一个 click 事件处理程序。首先添加 onClick$ 属性，并将其绑定到一个调用 alert('Hello World!') 的函数。

了解运行时

到目前为止，这可能看起来像一个正常的框架行为，但是 Qwik 与其他框架的运作方式截然不同。

每当您看到 $ 时，您应该想到，“延迟加载在这里发生”。

当您打开浏览器的开发者工具时，请注意，在您单击按钮之前不会加载任何 JavaScript。

如果需要 JavaScript 来订阅浏览器事件，Qwik 如何在不加载 JavaScript 的情况下实现这种交互？

请考虑以下应用程序的简化 HTML。

提示：单击HTML选项卡以查看服务器生成的实际 HTML。

<html>
  <body>
    <button on:click="chunk-abc.js#App_onClick">
      Click Me
    </button>
    <script id="Qwikloader">....</script>
  </body>
</html>

API 包含 $，以便 Qwik 优化器可以转换您的代码以进行延迟加载。

$ 是优化器提取延迟加载代码的信号。
$ 是一个信号，表明延迟加载“魔法”在此处发生。
TypeScript 规则确保您不会跳过任何应该出现 $ 的地方。

优化器会查找 $ 并将 $ 包裹的函数提取到一个单独的可延迟加载的块中。
当服务器渲染页面时，JSX 会被执行，并注意到存在一个点击监听器。点击监听器被序列化到 <button> 元素中，作为 on:click 属性。然后 Qwik 就会知道如何在客户端将此事件重新连接起来。
Qwikloader 脚本被内联到 HTML 中。Qwikloader 脚本为浏览器中的所有事件设置了一个全局监听器。Qwikloader 大约 1kb，并在大约 1ms 内执行。
当用户单击按钮时，Qwikloader 会拦截事件并查找具有 on:click 属性的元素。
on:click 属性包含
- 下载相关代码的 URL。
  - 为了避免点击和执行之间的延迟，Qwik 会预取与给定组件相关的代码。
- 需要执行一个由下载的块导出的符号，该符号包含该函数。
代码下载完成后，该函数就会被执行。

上述行为赋予了 Qwik 应用程序其即时启动属性（可恢复性），而无需急切地下载和执行代码，并执行昂贵的 hydration 操作。

注意为了避免用户操作和响应之间的延迟，Qwik 会在后台预取代码。

下一步监听文档/窗口

编辑教程