【Java 进阶篇】HTML DOM 事件详解

在这里插入图片描述

当用户在网页上点击按钮、输入文本、鼠标移动到某个区域或执行其他互动操作时，这些动作都可以触发事件。HTML DOM（文档对象模型）允许我们使用JavaScript来捕获、处理和响应这些事件，以实现网页的交互和动态性。本篇博客将围绕HTML DOM事件展开详细的解释，包括事件的类型、事件处理程序、事件对象和示例代码。让我们一起来深入了解吧。

什么是事件？

在网页开发中，事件是指用户或浏览器与网页元素交互的瞬间，例如点击按钮、移动鼠标、按下键盘等。这些互动动作都会触发特定的事件，而开发者可以编写JavaScript代码来响应这些事件。事件使得网页可以实现各种交互效果，包括表单验证、页面导航、动画效果等。

HTML DOM中的事件分为多种类型，包括鼠标事件、键盘事件、表单事件、文档事件等。每种事件都有其特定的触发条件和行为。接下来，让我们逐一介绍不同类型的事件。

鼠标事件

点击事件（click）

点击事件是最常见的事件之一，它在用户点击（或触摸）页面上的元素时触发。通常用于处理按钮点击、链接点击和其他需要用户响应的交互。

<button id="myButton">点击我</button>
<script>
  const button = document.getElementById('myButton');
  button.addEventListener('click', function() {
    alert('按钮被点击了！');
  });
</script>

上面的代码演示了如何使用addEventListener方法为一个按钮元素添加点击事件的监听器。当用户点击按钮时，会触发click事件，弹出一个警告框。

鼠标移动事件（mousemove）

鼠标移动事件在用户的鼠标光标在元素上移动时触发。您可以使用鼠标移动事件创建各种效果，如鼠标悬停效果和拖拽功能。

<div id="myDiv" style="width: 100px; height: 100px; background-color: #3498db;"></div>
<script>
  const myDiv = document.getElementById('myDiv');
  myDiv.addEventListener('mousemove', function() {
    myDiv.style.backgroundColor = '#e74c3c';
  });
</script>

在这个示例中，当用户将鼠标光标移动到<div>元素上时，背景颜色将变为红色。

双击事件（dblclick）

双击事件在用户双击页面上的元素时触发。它通常用于创建需要双击确认的操作，比如编辑文本或删除项目。

<p id="myText">双击我</p>
<script>
  const myText = document.getElementById('myText');
  myText.addEventListener('dblclick', function() {
    myText.innerHTML = '已被双击';
  });
</script>

在这个示例中，当用户双击段落文本时，文本将被替换为“已被双击”。

键盘事件

按键按下事件（keydown）

按键按下事件在用户按下键盘上的任意键时触发。它通常用于监听用户的键盘输入。

<input type="text" id="myInput">
<script>
  const myInput = document.getElementById('myInput');
  myInput.addEventListener('keydown', function(event) {
    console.log('按下的键码：' + event.keyCode);
  });
</script>

在这个示例中，当用户在文本框中按下键盘上的任意键时，键码将被记录在控制台中。

按键弹起事件（keyup）

按键弹起事件在用户释放键盘上的按键时触发。它通常用于监听用户的键盘输入，并在释放键时执行相应的操作。

<input type="text" id="myInput">
<script>
  const myInput = document.getElementById('myInput');
  myInput.addEventListener('keyup', function() {
    alert('键盘按键已释放');
  });
</script>

在这个示例中，当用户在文本框中释放键盘上的按键时，会弹出一个警告框。

输入事件（input）

输入事件在用户在文本框或文本区域中输入文本时触发。它通常用于即时响应用户的输入。

<input type="text" id="myInput">
<p id="output"></p>
<script>
  const myInput = document.getElementById('myInput');
  const output = document.getElementById('output');
  myInput.addEventListener('input', function() {
    output.textContent = myInput.value;
  });
</script>

在这个示例中，用户在文本框中输入文本时，文本框下方的<p>元素会即时更新显示用户输入的内容。

表单事件

提交事件（submit）

提交事件在用户提交表单时触发。它通常用于验证表单数据或执行其他与表单提交相关的操作。

<form id="myForm">
  <input type="text" name="username" required>
  <button type="submit">提交</button>
</form>
<script>
  const myForm = document.getElementById('myForm');
  myForm.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    alert('表单已提交');
  });
</script>

在这个示例中，用户点击表单中的提交按钮时，会触发submit事件，并弹出一个警告框。通过event.preventDefault()，我们阻止了表单的默认提交行为，以便在警告框弹出后保留在当前页面。

重置事件（reset）

重置事件在用户点击表单的重置按钮时触发。它通常用于将表单的输入字段重置为默认值。

<form id="myForm">
  <input type="text" name="username" value="默认值">
  <button type="reset">重置</button>
</form>
<script>
  const myForm = document.getElementById('myForm');
  myForm.addEventListener('reset', function() {
    alert('表单已重置');
  });
</script>

在这个示例中，用户点击表单中的重置按钮时，会触发reset事件，并弹出一个警告框。

文档事件

加载事件（load）

加载事件在文档加载完成后触发。它通常用于在页面加载完成后执行一些初始化操作。

<script>
  window.addEventListener('load', function() {
    alert('页面已加载');
  });
</script>

在这个示例中，当页面中的所有内容都加载完成后，会触发load事件，并弹出一个警告框。

卸载事件（unload）

卸载事件在用户离开页面或关闭浏览器窗口时触发。它通常用于在用户离开页面前执行一些清理操作。

<script>
  window.addEventListener('unload', function() {
    alert('即将离开页面');
  });
</script>

在这个示例中，当用户试图离开页面或关闭浏览器时，会触发unload事件，并弹出一个警告框。

自定义事件

除了上述内置事件类型，您还可以创建自定义事件。自定义事件允许开发者在需要时触发特定的事件，以满足应用程序的需求。

<button id="myButton">触发自定义事件</button>
<script>
  const myButton = document.getElementById('myButton');
  const customEvent = new Event('custom');

  myButton.addEventListener('custom', function() {
    alert('自定义事件已触发');
  });

  myButton.addEventListener('click', function() {
    myButton.dispatchEvent(customEvent);
  });
</script>

上面的代码中，我们创建了一个名为custom的自定义事件，并使用dispatchEvent方法在按钮点击时触发了这个自定义事件。

事件处理程序

事件处理程序是JavaScript函数，它们在特定事件发生时执行。事件处理程序通常通过addEventListener方法将其附加到DOM元素上，以便在事件触发时执行。事件处理程序接收一个事件对象作为参数，该对象包含了与事件相关的信息。

const myButton = document.getElementById('myButton');

myButton.addEventListener('click', function(event) {
  // 在这里编写处理点击事件的代码
  console.log('点击事件已触发');
});

上述代码中，我们使用addEventListener为一个按钮元素添加了一个点击事件处理程序。当按钮被点击时，事件处理程序中的代码将被执行，这里我们简单地在控制台中打印了一条消息。

要从DOM元素中删除事件处理程序，可以使用removeEventListener方法，传递与添加事件处理程序时相同的事件类型和处理程序函数。

myButton.removeEventListener('click', myClickHandler);

事件对象

事件处理程序的第一个参数通常是事件对象，它包含有关事件的详细信息。事件对象的属性和方法可以用来获取事件类型、目标元素、鼠标位置、按下的键以及其他有关事件的信息。

以下是一些常见的事件对象属性和方法：

event.type: 事件的类型（如"click"、"keydown"等）。
event.target: 触发事件的DOM元素。
event.clientX和event.clientY: 鼠标光标在窗口中的水平和垂直坐标。
event.keyCode: 按下的键的键码。
event.preventDefault(): 阻止事件的默认行为（如取消表单提交或链接跳转）。
event.stopPropagation(): 阻止事件冒泡到更高级的DOM元素。
event.stopImmediatePropagation(): 阻止事件冒泡并阻止后续处理程序的执行。
event.currentTarget: 当前正在处理事件的元素。
event.data: 用于自定义数据传递的属性。

const myLink = document.getElementById('myLink');

myLink.addEventListener('click', function(event) {
  console.log('链接文本: ' + event.target.textContent);
  console.log('鼠标位置: (' + event.clientX + ', ' + event.clientY + ')');
  event.preventDefault(); // 阻止默认跳转行为
});

在上述示例中，我们使用事件对象获取了链接元素的文本内容、鼠标位置，并阻止了链接的默认跳转行为。

事件冒泡

事件冒泡是指事件从DOM树中的最底层元素开始，然后冒泡（逐级向上传递）到最高级的祖先元素。这意味着如果在子元素上触发了一个事件，它会向上传到父元素，然后继续向上传到更高级的祖先元素。

例如，如果用户点击一个按钮，点击事件会从按钮元素开始冒泡，然后传递给按钮的父元素，以此类推，直到传递到<body>元素。

<div id="outer">
  <div id="middle">
    <button id="inner">点击我</button>
  </div>
</div>
<script>
  const outer = document.getElementById('outer');
  const middle = document.getElementById('middle');
  const inner = document.getElementById('inner');

  outer.addEventListener('click', function() {
    console.log('点击事件 - outer');
  });

  middle.addEventListener('click', function() {
    console.log('点击事件 - middle');
  });

  inner.addEventListener('click', function() {
    console.log('点击事件 - inner');
  });
</script>

当用户点击按钮时，事件会从inner元素开始冒泡，然后触发middle元素的点击事件处理程序，最后触发outer元素的点击事件处理程序。

阻止事件冒泡

如果需要阻止事件继续向上冒泡，可以使用事件对象的stopPropagation()方法。这在需要防止父元素处理同一事件时非常有用。

<div id="outer">
  <div id="middle">
    <button id="inner">点击我</button>
  </div>
</div>
<script>
  const outer = document.getElementById('outer');
  const middle = document.getElementById('middle');
  const inner = document.getElementById('inner');

  inner.addEventListener('click', function(event) {
    console.log('点击事件 - inner');
    event.stopPropagation(); // 阻止事件冒泡
  });

  middle.addEventListener('click', function() {
    console.log('点击事件 - middle');
  });

  outer.addEventListener('click', function() {
    console.log('点击事件 - outer');
  });
</script>

在这个示例中，当用户点击按钮时，事件会从inner元素开始冒泡，但由于我们在inner的事件处理程序中调用了event.stopPropagation()，事件不会继续传递给middle和outer元素的事件处理程序。

事件委托

事件委托是一种常见的优化技巧，可以减少添加事件处理程序的数量，特别是在处理大量相似元素的情况下。它利用事件冒泡原理，将事件处理程序附加到共同的祖先元素上，以便在事件发生时代理到子元素。

<ul id="myList">
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>
<script>
  const myList = document.getElementById('myList');

  myList.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      console.log('点击了列表项: ' + event.target.textContent);
    }
  });
</script>

在这个示例中，我们将点击事件处理程序附加到了<ul>元素上，但只在用户点击<li>元素时执行相应的操作。通过检查event.target，我们可以确定用户点击的是哪个<li>元素。

示例：创建一个任务清单

让我们通过一个实际的示例来演示如何使用事件处理程序和事件对象来创建一个简单的任务清单应用。用户可以添加新任务、标记任务为已完成以及删除任务。

<input type="text" id="taskInput" placeholder="添加新任务">
<button id="addTask">添加任务</button>
<ul id="taskList"></ul>
<script>
  const taskInput = document.getElementById('taskInput');
  const addTaskButton = document.getElementById('addTask');
  const taskList = document.getElementById('taskList');

  addTaskButton.addEventListener('click', function() {
    const taskText = taskInput.value;
    if (taskText) {
      const taskItem = document.createElement('li');
      taskItem.textContent = taskText;
      taskList.appendChild(taskItem);

      // 添加点击事件处理程序，用于标记任务为已完成
      taskItem.addEventListener('click', function() {
        if (!taskItem.classList.contains('completed')) {
          taskItem.classList.add('completed');
        } else {
          taskItem.classList.remove('completed');
        }
      });

      // 添加双击事件处理程序，用于删除任务
      taskItem.addEventListener('dblclick', function() {
        taskList.removeChild(taskItem);
      });

      taskInput.value = ''; // 清空输入框
    }
  });
</script>

在这个示例中，我们创建了一个任务清单，用户可以在文本框中输入新任务，点击“添加任务”按钮，然后将任务添加到任务列表中。点击任务将标记为已完成，双击任务将删除任务。通过事件委托，我们将点击和双击事件处理程序附加到了任务列表上，而不是每个单独的任务项。

结语

HTML DOM事件是实现网页交互和动态性的重要组成部分。通过使用事件类型、事件处理程序和事件对象，开发者可以响应用户的操作、改善用户体验，并实现各种功能。了解如何使用事件是成为一名出色的前端开发者的必备技能。希望本文对你深入理解HTML DOM事件有所帮助，如果有任何问题或需要更多信息，请随时提出。祝编程愉快！

作者信息

作者：繁依Fanyi
CSDN： https://techfanyi.blog.csdn.net
掘金：https://juejin.cn/user/4154386571867191