DOM 事件使网页具有交互性。使用 DOM 事件可以实现页面点击或表单提交，它可以让开发人员创建引人入胜的用户体验。
DOM 事件的一些示例包括当用户单击鼠标时、加载网页时、加载图像时、提交 HTML 表单时以及用户按下某个键时。
在本文中，我们将简化 DOM 事件中的关键概念并探索如何处理它们。
addEventListener，将事件处理程序附加到元素，它允许您定义元素如何对用户与页面的交互做出反应。
示例：下面的代码添加了一个“点击”事件，以便在单击图像时显示鸡尾酒详细信息。
`img.addEventListener('click', () => handleClick(cocktail));`
querySelector，允许您使用类似 CSS 的选择器来选择元素。这是定位元素最通用的方法之一。
示例：此代码正在网页上创建一个可折叠部分。 document.querySelectorAll 正在选择网页上的所有 h3 元素，并返回所有匹配元素的 NodeList。
const setupCollapsibles = () => {
const collapsibles = document.querySelectorAll('.collapsible h3');
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,
};
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中文网其他相关文章！
