如何在 HTML 中从外部 JS 函数处理点击事件？解决未定义函数错误

2024-03-05 08:42:14

如何在 HTML 中从外部 JS 函数处理点击事件

导言

在 web 开发中，处理 HTML 中的点击事件对于创建交互式和动态的页面至关重要。然而，当涉及从外部模板文件添加模板时，在模板中添加 onclick 函数可能会引发未定义函数的错误。本博客文章将探讨这个问题，并提供一个从外部 JS 函数处理点击事件的解决方案。

问题：未定义外部函数

当您从外部模板文件向 HTML 模板添加 onclick 函数时，您可能会遇到未定义函数的错误。这是因为在模板文件中没有声明该函数。

解决方案：导入外部函数

要从外部模板文件中调用外部函数，必须在模板中显式导入该函数。您可以使用 JavaScript 的 import 语句来完成此操作。

示例：

<!-- 导入 handleClickCard 函数 -->
import { handleClickCard } from "./script.mjs";

<!-- 调用 handleClickCard 函数 -->
<button class="btn btn-primary" onclick="handleClickCard(123)">按钮</button>

通过导入函数，您现在可以从模板文件中调用它，而无需在模板文件中重新声明它。

高级技术：事件委派

在某些情况下，您可能希望在容器元素上处理子元素的点击事件，而不是为每个子元素添加单独的 onclick 函数。这种技术称为事件委派。

示例：

<!-- 在容器元素上设置事件侦听器 -->
<div id="container">
  <button class="btn btn-primary">按钮 1</button>
  <button class="btn btn-primary">按钮 2</button>
  <button class="btn btn-primary">按钮 3</button>
</div>

<!-- 使用事件委派处理子元素的点击事件 -->
<script>
  const container = document.getElementById("container");
  container.addEventListener("click", (e) => {
    if (e.target.classList.contains("btn-primary")) {
      // 获取按钮的索引
      const index = Array.from(container.children).indexOf(e.target);

      // 根据索引执行操作
      handleClickCard(index);
    }
  });
</script>