• 【Java 进阶篇】JavaScript 事件详解

    在这里插入图片描述

    在本篇博客中，我们将深入探讨JavaScript事件，这是网页交互的核心。我们将从什么是事件开始，然后逐步介绍事件的类型、如何注册事件、事件处理程序、事件对象以及事件冒泡等相关内容。最终，我们将提供大量的示例代码来帮助您更好地理解JavaScript事件。

    什么是事件？

    在Web开发中，事件是用户或浏览器发生的事情。这些事件可以是用户与页面互动，例如点击按钮、输入文本或鼠标移动，也可以是页面本身发生的事情，如文档加载完成或定时器触发。

    JavaScript允许我们捕获、处理和响应这些事件，使得我们可以创建动态和交互性的网页。

    事件的类型

    JavaScript支持多种不同类型的事件，包括但不限于：

    1. 鼠标事件

    • click：鼠标点击事件。
    • mouseover：鼠标移动到元素上时触发。
    • mouseout：鼠标从元素上移开时触发。
    • mousedown：鼠标按钮被按下时触发。
    • mouseup：鼠标按钮被释放时触发。

    2. 键盘事件

    • keydown：键盘上的键被按下时触发。
    • keyup：键盘上的键被释放时触发。

    3. 表单事件

    • submit：表单提交时触发。
    • change：表单元素的值发生改变时触发。
    • input：输入框的内容发生变化时触发。

    4. 网页加载事件

    • load：整个页面及外部资源加载完成时触发。
    • DOMContentLoaded：DOM结构加载完成时触发，不必等待图片等外部资源加载完毕。

    5. 自定义事件

    您还可以创建自定义事件，以满足特定需求。

    如何注册事件

    要在HTML元素上注册事件，您可以使用HTML属性或JavaScript代码。以下是两种主要方法：

    1. HTML属性

    可以使用以下HTML属性将事件处理程序附加到HTML元素：

    <button onclick="myFunction()">点击我button>

    • 1

    这里onclick是一个事件属性，它告诉浏览器在按钮被点击时执行myFunction函数。

    2. JavaScript代码

    使用JavaScript，您可以使用addEventListener方法注册事件处理程序：

    const button = document.getElementById('myButton');
button.addEventListener('click', myFunction);

    • 1
    • 2

    这样的方式更具灵活性，可以在JavaScript中动态创建、移除和控制事件。

    事件处理程序

    事件处理程序是JavaScript函数，它定义了事件触发时要执行的操作。事件处理程序通常带有一个事件对象参数，以便访问事件的相关信息。

    function myFunction(event) {
  alert('按钮被点击了！');
}

    • 1
    • 2
    • 3

    事件对象

    事件处理程序的参数通常是事件对象，它包含有关事件的详细信息，例如事件类型、目标元素、鼠标坐标等。

    function myFunction(event) {
  console.log('事件类型：' + event.type);
  console.log('目标元素：' + event.target);
  console.log('鼠标X坐标：' + event.clientX);
  console.log('鼠标Y坐标：' + event.clientY);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    事件对象的属性和方法因事件类型而异，可以根据需要使用。

    事件冒泡

    事件冒泡是指事件从目标元素冒泡到文档树根元素的过程。这意味着事件会先在最深的嵌套元素上触发，然后逐级向上传播，直到文档树的根元素。

    <div id="parent">
  <button id="child">点击我button>
div>

    • 1
    • 2
    • 3
    const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', function() {
  console.log('父元素被点击');
});

child.addEventListener('click', function() {
  console.log('子元素被点击');
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    在这个示例中，当点击按钮时，事件会首先在子元素上触发，然后冒泡到父元素。因此，控制台将输出以下内容：

    子元素被点击
父元素被点击

    • 1
    • 2

    您可以使用stopPropagation方法来阻止事件继续冒泡：

    child.addEventListener('click', function(event) {
  console.log('子元素被点击');
  event.stopPropagation(); // 阻止事件冒泡
});

    • 1
    • 2
    • 3
    • 4

    在这种情况下，只有子元素上的事件处理程序会运行，父元素上的不会执行。

    示例代码

    让我们通过一些示例代码来演示JavaScript事件的使用。

    示例 1：点击按钮改变文本

    DOCTYPE html>
<html>
<head>
  <title>点击按钮改变文本title>
head>
<body>
  <button id="myButton">点击我button>
  <p id="myText">我会在按钮点击后改变p>
  <script>
    const button = document.getElementById('myButton');
    const text = document.getElementById('myText');
    
    button.addEventListener('click', function() {
      text.textContent = '按钮被点击了！';
    });
  script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    示例 2：鼠标悬停显示提示

    DOCTYPE html>
<html>
<head>
  <title>鼠标悬停显示提示title>
  <style>
    .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }
    .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -60px;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
    }
  style>
head>
<body>
  <div class="tooltip">
    鼠标悬停我
    <span class="tooltiptext">这是一个提示span>
  div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    这两个示例展示了事件处理程序的实际应用，以及如何与CSS样式和HTML元素互动，创造出各种交互效果。

    结语

    JavaScript事件是Web开发中不可或缺的一部分，使得网页变得更加生动和交互。在本博客中，我们深入探讨了事件的类型、注册事件的方法、事件处理程序、事件对象以及事件冒泡。通过不断练习和实验，您将能够掌握JavaScript事件，创造出更具交互性的网页。祝您编写愉快！

    如果您对特定主题有更多的疑问或需要更多的示例代码，请随时向我们提问。我们很乐意为您提供帮助。

    作者信息

    作者 ： 繁依Fanyi
    CSDN： https://techfanyi.blog.csdn.net
    掘金：https://juejin.cn/user/4154386571867191
  • 相关阅读:
    MongoDB bin目录没有mongo.exe命令
    独立站有哪些选品技巧
    Databend 开源周报第 114 期
    【Text2SQL 论文】DBCopilot：将 NL 查询扩展到大规模数据库
    达梦数据库修改最大连接数
    金仓数据库兼容Oracle exp/imp的导出导入工具手册（6. 附录B：imp导入参数说明）
    48.【C++map映射】
    计算机毕业设计 基于SpringBoot的健身房管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解目录
    【面试题】智力题
    【JAVA】有关包的概念
  • 原文地址：https://blog.csdn.net/qq_21484461/article/details/133849272