了解 JavaScript 中的 DOM 事件：交互综合指南

JavaScript 中的 DOM 事件

DOM 事件 是浏览器中发生的操作或事件，例如用户交互、资源加载或状态更改。事件是 Web 开发不可或缺的一部分，允许开发人员使网页具有交互性。

---

1.什么是 DOM 事件？

DOM 事件表示可以使用 JavaScript 检测到的交互或更改。事件示例包括：

• 单击按钮（单击）
• 在输入字段中键入（input、keydown、keyup）
• 将鼠标悬停在元素上（鼠标悬停、鼠标移开）
• 提交表格（提交）
• 页面加载完成（load）

---

2.事件监听器

事件监听器是等待目标元素上发生特定事件的函数。

添加事件监听器

使用 addEventListener 方法将事件侦听器附加到元素。

const button = document.querySelector("button");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

删除事件监听器

使用removeEventListener方法分离事件监听器。

function handleClick() {
  alert("Button clicked!");
}

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

---

3. DOM 事件的类型

A.鼠标事件

• click：当鼠标单击元素时触发。
• dblclick：双击鼠标时触发。
• mouseover：当鼠标进入元素时触发。
• mouseout：当鼠标离开元素时触发。

B.键盘事件

• keydown：按下某个键时触发。
• keyup：释放按键时触发。
• keypress：已弃用，请使用 keydown 代替。

C.表单事件

• 提交：提交表单时触发。
• 更改：当输入元素的值更改时触发。

D.窗口活动

• load：页面完全加载时触发。
• resize：调整浏览器窗口大小时触发。
• scroll：页面滚动时触发。

E.输入事件

• input：当输入字段的值发生变化时触发。
• focus：当输入元素获得焦点时触发。
• 模糊：当输入元素失去焦点时触发。

---

4.事件对象

当事件发生时，JavaScript 会提供一个 事件对象，其中包含有关该事件的详细信息。

事件对象的常用属性

• type：事件类型（例如，单击、按键）。
• target：触发事件的元素。
• currentTarget：事件处理程序所附加到的元素。
• PreventDefault(): 阻止事件的默认操作。
• stopPropagation()：停止事件传播到父元素。

示例

const button = document.querySelector("button");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

---

5.事件传播

事件传播决定事件处理程序的执行顺序。

A.事件冒泡

事件从目标元素开始并向上冒泡到其祖先。

function handleClick() {
  alert("Button clicked!");
}

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

单击按钮将触发两个处理程序。

B.事件捕获

事件从根元素开始，向下移动到目标元素。

document.querySelector("button").addEventListener("click", function(event) {
  console.log("Event type:", event.type); // Output: click
  console.log("Target element:", event.target); // Output: <button>...</button>
  event.preventDefault(); // Prevent default behavior
});

将第三个参数设置为 true 即可启用捕获。

停止传播

使用 stopPropagation() 来防止进一步传播。

document.querySelector("div").addEventListener("click", function() {
  console.log("Div clicked!");
});

document.querySelector("button").addEventListener("click", function() {
  console.log("Button clicked!");
});

---

6.委托事件

事件委托利用事件冒泡来管理动态添加元素的事件。

示例

element.addEventListener("click", handler, true);

---

7.实际例子

A.切换可见性

button.addEventListener("click", function(event) {
  event.stopPropagation();
});

B.表单验证

document.querySelector("ul").addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("List item clicked:", event.target.textContent);
  }
});

C.无限滚动

const button = document.querySelector("button");
const content = document.querySelector(".content");

button.addEventListener("click", function() {
  content.style.display = content.style.display === "none" ? "block" : "none";
});

---

8.总结

• DOM 事件允许用户和网页之间的交互。
• 使用 addEventListener 附加事件处理程序。
• 了解事件对象和传播以进行有效的事件管理。
• 在处理动态元素时使用事件委托以获得更好的性能。

通过掌握 DOM 事件，您可以创建高度交互且用户友好的 Web 应用程序。

嗨，我是 Abhay Singh Kathayat！
我是一名全栈开发人员，拥有前端和后端技术方面的专业知识。我使用各种编程语言和框架来构建高效、可扩展且用户友好的应用程序。
请随时通过我的商务电子邮件与我联系：kaashshorts28@gmail.com。

以上是了解 JavaScript 中的 DOM 事件：交互综合指南的详细内容。更多信息请关注PHP中文网其他相关文章！