前端JavaScript篇之常见事件

星辰迷上大海

于 2024-03-13 08:15:00 发布

阅读量996

点赞数 15

分类专栏： JavaScript 前端知识点文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_37255976/article/details/136658746

版权

前端知识点同时被 2 个专栏收录

191 篇文章 0 订阅

订阅专栏

JavaScript

102 篇文章 1 订阅

订阅专栏

JavaScript常见事件

JavaScript中的事件是指用户与网页元素交互时所触发的动作或者状态变化。这些事件可以包括点击、悬停、键盘输入、页面加载等。在JavaScript中，您可以通过添加事件监听器来捕获并处理这些事件。以下是一些常见的JavaScript事件：

click（点击）：当用户点击某个元素时触发。
mouseover（鼠标悬停）：当鼠标悬停在元素上方时触发。
keydown（按键按下）：当用户按下键盘上的任意键时触发。
load（加载）：当页面完全加载后触发。
submit（提交）：当表单提交时触发。

您可以使用JavaScript来注册这些事件，并在事件发生时执行相应的操作。

click（点击）

在前端开发中，click 事件是指当用户点击某个元素时触发的动作。这是用户与网页交互最常见的一种方式之一。

在实际项目中，您可能需要根据用户的点击来执行不同的操作。例如，在一个社交媒体应用程序中，当用户点击“喜欢”按钮时，您可能需要向服务器发送请求以更新喜欢的状态，并且可能还需要更新页面上的计数器以反映新的喜欢数量。

假设您正在开发一个网页，其中有一个按钮，当用户点击该按钮时，会改变按钮的颜色。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Click事件示例</title>
    <style>
      .highlight {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <button id="myButton">点击我</button>

    <script>
      const button = document.getElementById('myButton')
      button.addEventListener('click', function () {
        button.classList.add('highlight')
      })
    </script>
  </body>
</html>

请添加图片描述

上述代码中，我们首先获取了按钮元素，然后使用 addEventListener 方法为按钮添加了一个 click 事件监听器。当用户点击按钮时，触发的函数会将按钮的类更改为 “highlight”，从而改变按钮的背景颜色。

确保在DOM加载完成后再执行JavaScript代码，可以将代码放在DOMContentLoaded 事件监听器中。
了解事件冒泡和事件捕获，以便在需要时正确处理事件的传播。
在处理复杂的交互时，考虑到事件委托（event delegation）可以提高性能并简化代码。

click 事件是前端开发中最常见的事件类型之一，它使我们能够响应用户的点击操作，并在点击发生时执行特定的代码。通过理解事件的触发和处理，我们可以为用户提供更加丰富和动态的交互体验。

mouseover（鼠标悬停）

mouseover 事件是指当用户将鼠标悬停在某个元素上方时触发的动作。这种事件常用于提供用户交互反馈，例如当用户将鼠标悬停在链接上时显示链接预览或者改变元素的样式。

在实际项目中，您可能需要根据用户的鼠标悬停来展示相关信息或者改变元素的外观。例如，在一个电子商务网站上，当用户将鼠标悬停在产品图片上时，您可能希望显示产品的价格和简要描述。

假设您正在开发一个网页，其中有一张图片，当用户将鼠标悬停在图片上时，希望显示一段文字说明。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Mouseover事件示例</title>
    <style>
      #imageContainer {
        position: relative;
        display: inline-block;
      }
      #infoBox {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: white;
        padding: 5px;
        border: 1px solid #ccc;
      }
      img {
        width: 400px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="imageContainer">
      <img src="./img/2.jpg" alt="Your Image" />
      <div id="infoBox">这是一张美丽的图片</div>
    </div>

    <script>
      const imageContainer = document.getElementById('imageContainer')
      const infoBox = document.getElementById('infoBox')

      imageContainer.addEventListener('mouseover', function () {
        infoBox.style.display = 'block'
      })

      imageContainer.addEventListener('mouseout', function () {
        infoBox.style.display = 'none'
      })
    </script>
  </body>
</html>

请添加图片描述

在上述代码中，我们首先创建了一个包含图片和信息框的容器。随后，我们为容器添加了 mouseover 和 mouseout 事件监听器。当用户将鼠标悬停在容器上时，信息框的显示状态会被切换为可见；当鼠标移出时，信息框又会隐藏起来。

鼠标悬停事件通常与鼠标移出事件结合使用，以确保用户体验良好。
考虑到不同设备的触摸屏幕，应该谨慎使用仅限于鼠标的交互设计。

mouseover 事件使得我们能够在用户将鼠标悬停在元素上时执行相应的代码，从而提供更加丰富和动态的交互体验。通过理解事件的触发和处理，我们可以为用户提供更加友好和直观的界面反馈。

keydown（按键按下）

keydown 事件是指当用户在页面上按下键盘上的任意键时触发的动作。这种事件通常用于捕获用户的键盘输入，以便执行相应的操作。

在实际项目中，您可能需要根据用户的键盘输入来执行不同的操作。例如，在一个文本编辑应用程序中，当用户按下键盘上的某个特定键时，您可能需要检测并处理用户的输入，比如执行撤销或保存操作。

假设您正在开发一个简单的网页，当用户按下键盘上的任意键时，页面上的文字颜色会改变。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Keydown事件示例</title>
  <style>
    #content {
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div id="content">按下键盘上的任意键看看会发生什么</div>

  <script>
    const content = document.getElementById("content");
    document.addEventListener("keydown", function(event) {
      content.style.color = getRandomColor();
    });

    function getRandomColor() {
      const letters = "0123456789ABCDEF";
      let color = "#";
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
  </script>
</body>
</html>

请添加图片描述
在上述代码中，我们为整个文档添加了 keydown 事件监听器。当用户按下键盘上的任意键时，触发的函数会将内容的文字颜色更改为随机的颜色。

确保在DOM加载完成后再执行JavaScript代码，可以将代码放在DOMContentLoaded 事件监听器中。
在处理键盘事件时，要考虑到不同的键盘布局和用户习惯，确保您的交互设计对多种情况都友好。

keydown 事件使得我们能够响应用户在页面上按下键盘上的任意键的操作，并在按键按下时执行特定的代码。通过理解事件的触发和处理，我们可以为用户提供更加丰富和动态的交互体验，从而增强用户与页面的互动性。

load（加载）

load 事件是指当整个页面及其所需资源完全加载后触发的事件。这种事件通常用于在页面加载完成后执行一些初始化操作或者处理特定的逻辑。

在实际项目中，您可能需要在页面加载完成后执行一些操作，比如初始化页面数据、加载动画、或者向服务器请求额外的数据。

假设您正在开发一个包含大量图片的网页，当所有图片都加载完成后，您希望显示一个“欢迎”的提示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Load事件示例</title>
    <style>
      #welcomeMessage {
        display: none;
        text-align: center;
        font-size: 24px;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <div id="welcomeMessage">欢迎访问我们的网站！</div>

    <script>
      window.addEventListener('load', function () {
        const welcomeMessage = document.getElementById('welcomeMessage')
        welcomeMessage.style.display = 'block'
      })
    </script>
  </body>
</html>

请添加图片描述

在上述代码中，我们为整个窗口添加了 load 事件监听器。当整个页面及其所需资源完全加载完成后，触发的函数会将欢迎信息的显示状态切换为可见。

load 事件仅在整个页面及其所需资源完全加载后才会触发，因此适合于执行那些依赖于整个页面结构和资源完全加载的操作。
对于单个元素内部的资源加载完成，可以考虑使用该元素的 load 事件。

load 事件使得我们能够在整个页面及其所需资源完全加载后执行特定的代码，从而提供更加丰富和动态的交互体验。通过理解事件的触发和处理，我们可以在页面加载完成后执行必要的初始化操作，确保用户获得最佳的浏览体验。

submit（提交）

submit 事件是指当用户提交表单时触发的事件。这种事件通常用于在用户提交表单之前执行验证操作或者在表单提交后处理用户输入的数据。

在实际项目中，您可能需要在用户提交表单时执行一些验证逻辑，比如检查用户输入是否合法，并在验证通过后将数据发送到服务器。

假设您正在开发一个注册页面，当用户点击注册按钮提交表单时，您希望验证用户输入的信息是是否有效，并向服务器发送注册请求。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Submit事件示例</title>
  </head>
  <body>
    <form id="registrationForm">
      <input type="text" id="username" placeholder="用户名" required />
      <input type="password" id="password" placeholder="密码" required />
      <button type="submit">注册</button>
    </form>

    <script>
      const form = document.getElementById('registrationForm')
      form.addEventListener('submit', function (event) {
        event.preventDefault() // 阻止表单默认提交行为

        // 在这里执行表单验证和提交逻辑
        const username = document.getElementById('username').value
        const password = document.getElementById('password').value

        if (username && password) {
          // 执行提交逻辑，比如向服务器发送注册请求
          console.log('提交表单 - 用户名：' + username + '，密码：' + password)
        } else {
          alert('用户名和密码不能为空')
        }
      })
    </script>
  </body>
</html>

请添加图片描述

在上述代码中，我们为表单添加了 submit 事件监听器。当用户点击注册按钮提交表单时，触发的函数会首先阻止表单的默认提交行为，然后执行自定义的表单验证和提交逻辑。

在表单提交事件中，通常需要使用 event.preventDefault() 阻止表单的默认提交行为，以便执行自定义的验证和处理逻辑。
表单验证逻辑可以根据具体需求进行设计，确保用户输入的数据符合预期的格式和规范。

submit 事件使得我们能够在用户提交表单时执行特定的验证和处理逻辑，从而确保用户输入的数据符合预期的格式和规范，并且在验证通过后将数据提交到服务器。通过理解事件的触发和处理，我们可以为用户提供更加友好和安全的表单交互体验，从而增强用户与网站的互动性。

持续学习总结记录中，回顾一下上面的内容：
JavaScript常见事件包括click（点击）、mouseover（鼠标悬停）、keydown（按键按下）、load（加载）、submit（提交）等。这些事件用于捕获用户在页面上的交互动作，比如点击按钮、移动鼠标、按下键盘、页面加载完成和提交表单等。通过处理这些事件，我们可以实现丰富的交互体验，比如验证表单、改变页面内容、执行动画效果等。掌握这些事件能够让我们更好地响应用户操作，提升网站的交互性和用户体验。