了解 JavaScript 中的 DOM 事件：交互综合指南-js教程-PHP中文网

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

DDD

发布： 2025-01-04 16:53:40

原创

550 人浏览过

Understanding DOM Events in JavaScript: A Comprehensive Guide to Interaction

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";
});

登录后复制