了解 DOM 事件

DOM 事件使网页具有交互性。使用 DOM 事件可以实现页面点击或表单提交，它可以让开发人员创建引人入胜的用户体验。

DOM 事件的一些示例包括当用户单击鼠标时、加载网页时、加载图像时、提交 HTML 表单时以及用户按下某个键时。

在本文中，我们将简化 DOM 事件中的关键概念并探索如何处理它们。

1. 添加事件监听器

addEventListener，将事件处理程序附加到元素，它允许您定义元素如何对用户与页面的交互做出反应。

示例：下面的代码添加了一个“点击”事件，以便在单击图像时显示鸡尾酒详细信息。

`img.addEventListener('click', () => handleClick(cocktail));`

2. 查询选择器

querySelector，允许您使用类似 CSS 的选择器来选择元素。这是定位元素最通用的方法之一。

示例：此代码正在网页上创建一个可折叠部分。 document.querySelectorAll 正在选择网页上的所有 h3 元素，并返回所有匹配元素的 NodeList。

const setupCollapsibles = () => {
  const collapsibles = document.querySelectorAll('.collapsible h3');

3. getElementById 和 getElementsByClassName

getElementById 通过其唯一 id 定位单个元素。

类似地，getElementsByClassName 选择具有特定类的所有元素并将它们作为集合返回。

示例： 下面，getElementById 通过 HTML 文档中的 id 属性查找元素。

此处用于访问特定的表单输入、新名称、新成分、新图像、新配方并检索它们的值。

这些值然后存储在用 const 定义的 newCocktail 对象的属性中。

这样，当用户提交表单来创建新的鸡尾酒时，它就会以结构化的方式存储在 newCocktail 对象中。

const newCocktail = {
      name: document.getElementById('new-name').value,
      ingredients: document.getElementById('new-ingredients').value.split(', '),
      image: document.getElementById('new-image').value,
      recipe: document.getElementById('new-recipe').value,
    }; 

4. DOM内容加载

DOMContentLoaded 事件确保您的 JavaScript 仅在 DOM 完全加载后运行，从而防止在元素可用之前尝试访问元素而发生错误。

示例： DOMContentLoaded 是在初始 HTML 文档完全加载和解析后触发的事件，无需等待样式表、图像或其他外部资源完全加载。

它确保 DOM 完全构建且可访问，因此您可以安全地与 HTML 中的元素交互，例如添加事件侦听器或操作 DOM。

在下面的代码中，浏览器告诉您该文档现在可用，用户可以开始与其交互。

document.addEventListener('DOMContentLoaded', () => {
  setupEditListener();
  setupDeleteListener();
});

最后的注释

DOM 事件是使网页具有交互性并吸引用户的基础。通过理解和利用 addEventListener、querySelector、getElementById 和 getElementsByClassName 等核心方法，您可以创建响应单击、表单提交等的动态用户界面。

此外，DOMContentLoaded 事件可确保您的脚本仅在 DOM 完全加载后执行，从而防止潜在错误并确保流畅的用户交互。

总之，DOM 事件允许您：

• 使用 addEventListener 附加事件处理程序以实现响应式交互。

• 使用querySelector或getElementById选择元素来动态更新内容。

• 根据用户输入管理事件触发的操作，例如表单提交。

• 使用 DOMContentLoaded 确保您的脚本在正确的时间运行。

通过这些技术，您可以将静态网页转变为交互式体验，从而增强用户参与度。

以上是了解 DOM 事件的详细内容。更多信息请关注PHP中文网其他相关文章！