【Java 进阶篇】HTML DOM 事件详解-CSDN博客

当用户在网页上点击按钮、输入文本、鼠标移动到某个区域或执行其他互动操作时这些动作都可以触发事件。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