掌握 JavaScript 中的事件处理：从基础知识到高级技术-js教程-PHP中文网

掌握 JavaScript 中的事件处理：从基础知识到高级技术

Susan Sarandon

发布： 2024-12-26 17:47:10

原创

484 人浏览过

Mastering Event Handling in JavaScript: From Basics to Advanced Techniques

JavaScript 中的事件处理

事件处理是 JavaScript 的一个重要方面，它允许开发人员通过响应用户操作（如单击、按键或鼠标移动）来创建交互式网页。

1.什么是事件？

事件是指网页中发生的任何交互或事件，例如：

鼠标操作：单击、双击、鼠标悬停、鼠标移开
键盘操作：keydown、keyup、keypress
表单操作：提交、更改、聚焦
窗口操作：加载、调整大小、滚动

JavaScript 侦听这些事件并使用 事件处理程序 响应特定操作。

2.添加事件监听器

A.使用内联 HTML 属性

您可以将事件处理程序直接附加到 HTML 元素。

<button onclick="alert('Button clicked!')">Click Me</button>

登录后复制

B.使用 addEventListener 方法

这是首选方法，因为它将 HTML 和 JavaScript 分开。

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

登录后复制

C.使用 on 属性

您可以将函数分配给元素的事件属性。

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

登录后复制

3.事件对象

当事件发生时，JavaScript 会提供一个具有有用属性和方法的事件对象。

示例

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

登录后复制

通用事件对象属性

type：事件类型（例如，单击、按键）。
target：触发事件的元素。
currentTarget：事件处理程序所附加到的元素。
PreventDefault()：防止默认操作（例如，停止表单提交）。
stopPropagation()：停止事件在 DOM 树中冒泡。

4.事件传播

A.冒泡

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

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

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

登录后复制

如果单击按钮，按钮和 div 的事件处理程序都会执行。

B.捕捉

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

要使用捕获，请将 addEventListener 的第三个参数设置为 true：

<button onclick="alert('Button clicked!')">Click Me</button>

登录后复制

防止传播

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

登录后复制

5.常见事件类型

鼠标事件

click：单击元素时触发。
dblclick：双击元素时触发。
mouseover：当鼠标指针进入元素时触发。

键盘事件

keydown：按下某个键时触发。
keyup：释放按键时触发。

表单事件

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

窗口事件

load：页面加载完成时触发。
resize：调整浏览器窗口大小时触发。

6.删除事件监听器

要删除事件监听器，请使用removeEventListener 方法。

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

登录后复制

7.实际示例：表单验证

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

登录后复制