JavaScript 中的事件和事件监听器

当我的 Flatiron School 课程第一阶段即将结束时，我已经学习了 JavaScript 编程的基础知识。但在这篇博文中，我将讨论我迄今为止最喜欢的主题的经验：事件和事件监听器。

JavaScript 可以侦听您正在使用的浏览器中可能发生的特定事件。 JS 可以听的东西有很多。一些示例包括按键、鼠标单击和表单提交，仅举几个最常用的示例。它们也是实现异步交互的好方法，即页面能够响应用户输入而不中断进程或重新加载页面。这对于网络应用程序的功能至关重要，因为网络应用程序需要类似的功能。我最喜欢事件的一点是，它们可以为您正在处理的 Web 项目添加大量交互性。

事件监听器是等待指定元素上发生特定事件的 JavaScript 函数。一旦事件触发，事件监听器就会执行特定的代码块（通常称为回调函数）。将事件侦听器附加到元素的最常见方法是使用 addEventListener 方法。

我将使用我目前在阶段末项目中使用的个人示例。对于我的项目，我创建了一个简单的 Web 应用程序，它从 API 获取信息并将其显示在带有交互元素的网页上。

我决定使用免费的 Amiibo API 创建一个 Web 应用程序，可以过滤多年来创建的所有 Yoshi Amiibo。我喜欢使用这个 API 的想法，因为 Yoshi 是我最喜欢的任天堂角色！

这是我如何制作此下拉菜单的示例，该菜单允许用户使用事件侦听器过滤不同的 Yoshi Amiibos！

这是我的特定函数的代码

      const amiiboContainer = document.getElementById('amiibo-container');
      const amiiboDropdown = document.getElementById('amiiboDropdown');
      const amiibos = data.amiibo;

      // Create an array of names for the dropdown search
      const amiiboNames = amiibos.map(amiibo => amiibo.name);

      // Populate the dropdown with Amiibo names
      amiiboNames.forEach(name => {
        const option = document.createElement('option');
        option.value = name;
        option.textContent = name;
        amiiboDropdown.appendChild(option);
      });

      // Display all Amiibos initially
      displayAmiibos(amiibos);

      // Add an event listener to filter Amiibos when the dropdown value changes
      amiiboDropdown.addEventListener('change', (e) => {
        const selectedName = e.target.value;
        const filteredAmiibos = amiibos.filter(amiibo => amiibo.name === selectedName );
        displayAmiibos(filteredAmiibos);
      });
    })

让我带您了解一下这段代码中发生了什么。

我做的第一件事是为 Yoshi Amiibo 名字创建一个数组。

const amiiboNames = amiibos.map(amiibo => amiibo.name);

该行有一个映射函数，可迭代存储在 amiibos 数组中的项目。对于每个 amiibo 对象，它将采用 name 属性并返回一个包含所有 Amiibo 名称的新数组。

下一步是用 Amiibo 名称填充下拉菜单。

amiiboNames.forEach(name => {
  const option = document.createElement('option');
  option.value = name;
  option.textContent = name;
  amiiboDropdown.appendChild(option);
});

此块创建一个 HTML 下拉菜单并用 Amiibos 的名字填充它。它使用 forEach() 迭代 amiiboNames 数组，然后创建一个 每个 Amiibo 名称的元素。

对于每个名称，它：

1. 创建一个新的选项元素。
2. 将选项的 value 属性设置为 Amiibo 名称。
3. 将选项的可见文本（textContent）设置为 Amiibo 名称。
4. 将我们的新选项元素附加到下拉菜单 (amiiboDropdown)。

之后，我决定在使用过滤器下拉列表之前首先显示所有 Yoshi Amiibo。

      const amiiboContainer = document.getElementById('amiibo-container');
      const amiiboDropdown = document.getElementById('amiiboDropdown');
      const amiibos = data.amiibo;

      // Create an array of names for the dropdown search
      const amiiboNames = amiibos.map(amiibo => amiibo.name);

      // Populate the dropdown with Amiibo names
      amiiboNames.forEach(name => {
        const option = document.createElement('option');
        option.value = name;
        option.textContent = name;
        amiiboDropdown.appendChild(option);
      });

      // Display all Amiibos initially
      displayAmiibos(amiibos);

      // Add an event listener to filter Amiibos when the dropdown value changes
      amiiboDropdown.addEventListener('change', (e) => {
        const selectedName = e.target.value;
        const filteredAmiibos = amiibos.filter(amiibo => amiibo.name === selectedName );
        displayAmiibos(filteredAmiibos);
      });
    })

我创建了这个函数，以便在页面加载时显示页面上的所有 Amiibo。其作用是将整个 amiibos 数组传递到我上面刚刚创建的函数中。

最后，我必须为下拉列表更改设置事件侦听器。

const amiiboNames = amiibos.map(amiibo => amiibo.name);

这是代码中最重要的部分之一，是该函数的事件监听器。这使得页面可以根据下拉菜单中选择的内容过滤页面上显示的 Amiibo。

其工作方式是 addEventListener() 函数侦听 amiiboDropdown 元素（或 下拉列表）上的更改事件。每当网络应用程序的用户选择一个新值，或者在本例中选择一个特定的 Yoshi Amiibo 时，该事件就会触发回调函数。

其工作顺序是：

1. selectedName 变量将存储使用 e.target.value 选择的任何选项的值
2. 然后它将过滤 amiibos 数组，以确保它只包含与 selectedName 匹配的 Yoshi Amiibo。
3. 过滤后，filteredAmiibos 数组会传递给 displayAmiibos()，然后该函数将使用过滤后的 Yoshi Amiibos 列表更新 UI。

总结

JavaScript 中的事件和事件监听器是开发具有交互性的 Web 应用程序时需要了解的一些最重要的事情。他们之所以伟大，仅因为这一点；它赋予应用程序功能和用途，同时为用户提供无缝体验的机会。

以上是JavaScript 中的事件和事件监听器的详细内容。更多信息请关注PHP中文网其他相关文章！