当我的 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
对于每个名称，它：
之后，我决定在使用过滤器下拉列表之前首先显示所有 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 元素（或
其工作顺序是：
JavaScript 中的事件和事件监听器是开发具有交互性的 Web 应用程序时需要了解的一些最重要的事情。他们之所以伟大，仅因为这一点；它赋予应用程序功能和用途，同时为用户提供无缝体验的机会。
以上是JavaScript 中的事件和事件监听器的详细内容。更多信息请关注PHP中文网其他相关文章！
