探索Web交互的关键：元素焦点、鼠标、滚轮、输入和键盘事件

最新推荐文章于 2024-10-10 09:18:42 发布

快习中学乐

最新推荐文章于 2024-10-10 09:18:42 发布

阅读量544

点赞数

文章标签：计算机外设前端交互

本文链接：https://blog.csdn.net/zsq520520_/article/details/134128400

版权

前言

在Web交互中，元素焦点、鼠标、滚轮、输入和键盘事件都是非常关键的要素。它们允许用户与网页进行交互，并实现丰富的用户体验。

我会用代码的形式让大家直观的感受这五大关键事件

元素焦点

元素焦点指的是用户当前正在与之交互的元素。在HTML中，可以使用tab键或通过JavaScript来设置元素的焦点。焦点状态可以帮助用户导航、输入内容或执行操作。

焦点事件案例

输入框焦点事件

当用户点击一个输入框时，可以触发焦点事件，例如显示一个提示信息或改变输入框的外观。

输入以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <input type="text" id="myInput" onfocus="showMessage()" onblur="hideMessage()" />

<script>
  function showMessage() {
    console.log("输入框获得焦点");
    // 或者执行其他操作
  }

  function hideMessage() {
    console.log("输入框失去焦点");
    // 或者执行其他操作
  }
</script>
    
      
</body>
</html>

这段代码是一个简单的HTML和JavaScript代码片段。它创建了一个文本输入框，并定义了两个事件处理函数：showMessage和hideMessage。

当文本输入框获得焦点时（用户点击或通过键盘导航到该输入框），showMessage函数将被调用，并在控制台上打印"输入框获得焦点"的消息。你可以在showMessage函数中执行任何其他你需要的操作。

当文本输入框失去焦点时（用户点击其他地方或通过键盘导航到其他元素），hideMessage函数将被调用，并在控制台上打印"输入框失去焦点"的消息。同样，你可以在hideMessage函数中执行其他操作。

运行代码效果图如下

失去焦点事件

当用户从一个输入框切换到另一个输入框时，可以触发失去焦点事件，例如验证输入内容或自动保存数据。

输入以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <input type="text" id="input1" onblur="validateInput(this.value)" />

  <script>
    function validateInput(value) {
      if (value === "") {
        console.log("输入不能为空！");
        // 或者显示错误提示信息等
      } else {
        console.log("输入有效！");
        // 或者执行其他操作
      }
    }
  </script>
    
      
</body>
</html>

这段代码创建了一个文本输入框，并定义了一个事件处理函数validateInput。当输入框失去焦点时，即用户点击其他地方或通过键盘导航到其他元素时，会调用validateInput函数。

validateInput函数获取输入框的值作为参数value，然后对其进行验证。如果输入的值为空字符串（即用户没有输入任何内容），则在控制台上打印"输入不能为空！"的消息。你可以在这个条件分支中执行其他操作，例如显示错误提示信息给用户。

如果输入的值不为空字符串，则在控制台上打印"输入有效！"的消息。同样，你可以在这个条件分支中执行其他操作，例如进行进一步的数据处理、发送网络请求等。

运行代码效果图如下

鼠标事件

指与鼠标交互相关的事件。这些事件可以在某个元素上监听，在用户对该元素进行鼠标操作时触发。

鼠标事件案例

鼠标点击事件

当用户在页面上点击某个元素时，可以触发点击事件，例如打开一个弹出窗口或执行特定的操作。

输入以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <button onclick="openPopup()">打开弹出窗口</button>

  <script>
    function openPopup() {
      console.log("弹出窗口已打开");
      // 或者执行其他操作
    }
  </script>
  
    
      
</body>
</html>

在上面的代码中，我们定义了一个名为openPopup的JavaScript函数。当用户点击按钮时，onclick事件会触发，并调用openPopup函数。

在openPopup函数内部，我们输出一条消息到控制台，表示弹出窗口已经打开。您也可以在函数内部执行其他操作，比如打开一个新的浏览器窗口、显示一个模态对话框等。

运行代码效果图如下

鼠标悬停事件

当用户将鼠标悬停在一个元素上时，可以触发悬停事件，例如显示一个工具提示或展示更多相关信息。

输入以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <img src="./89c6441981a6cd6f1eda13c03c73c34.jpg" onmouseover="showTooltip()" onmouseout="hideTooltip()" />

  <script>
    function showTooltip() {
      console.log("显示工具提示");
      // 或者执行其他操作
    }
  
    function hideTooltip() {
      console.log("隐藏工具提示");
      // 或者执行其他操作
    }
  </script>
    
      
</body>
</html>

在上面的代码中，我们在<img>元素上定义了两个事件处理函数：onmouseover和onmouseout。当用户将鼠标悬停在图像上时，onmouseover事件会触发，并调用showTooltip函数。相反，当用户将鼠标移开时，onmouseout事件会触发，并调用hideTooltip函数。

在showTooltip函数中，我们输出一条消息到控制台，表示正在显示工具提示。您也可以在函数内部执行其他操作，比如显示一个浮动框、改变图像边框等。

在hideTooltip函数中，我们输出另一条消息到控制台，表示正在隐藏工具提示。同样地，您也可以在函数内部执行其他操作，比如隐藏浮动框、恢复图像原有边框等。

运行代码效果图如下

滚轮事件

指与鼠标滚轮（或触摸板等设备上的类似控制）相关的事件。这些事件可以在某个元素上监听，在用户对该元素进行滚轮操作时触发。

滚动事件案例

页面滚动事件

当用户使用鼠标滚轮滚动页面时，可以触发滚动事件，例如实现滚动加载功能或响应式布局调整。

输入以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <!DOCTYPE html>
  <html>
  <head>
    <style>
      #content {
        height: 2000px;
        background-color: lightblue;
      }
    </style>
  </head>
  <body>
    <div id="content"></div>
  
    <script>
      window.addEventListener("scroll", handleScroll);
  
      function handleScroll() {
        // 获取滚动条的垂直位置
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
        // 执行相应的操作
        if (scrollTop > 100) {
          console.log("页面已滚动超过100像素");
          // 可以执行其他操作，例如显示返回顶部按钮等
        } else {
          console.log("页面滚动位置在100像素以下");
        }
      }
    </script>
  </body>
  </html>
  
</body>
</html>

在上述示例中，我们通过window.addEventListener("scroll", handleScroll)将handleScroll函数绑定到了页面的滚动事件上。每当用户在页面上进行滚动时，handleScroll函数就会被触发。

在handleScroll函数中，我们首先通过window.pageYOffset或document.documentElement.scrollTop获取滚动条的垂直位置（兼容不同浏览器）。然后，我们可以根据具体需求执行相应的操作。

在示例中，我们判断如果滚动条的位置超过了100像素，则通过控制台输出相应的信息。您可以根据实际需求，在handleScroll函数中执行其他操作，例如显示返回顶部按钮、懒加载内容等。

运行代码效果图如下

图片缩放事件

当用户在页面上滚动鼠标滚轮时，可以触发图片缩放事件，例如放大或缩小一幅图像。

输入以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <img src="./89c6441981a6cd6f1eda13c03c73c34.jpg" onwheel="zoomImage(event)" />

  <script>
    function zoomImage(event) {
      const zoomAmount = event.deltaY > 0 ? -0.1 : 0.1;
      console.log("缩放图片：" + zoomAmount);
      // 或者执行其他操作来实现图片缩放效果
    }
  </script>

      
</body>
</html>

在这段代码中，我们将onwheel属性设置为zoomImage(event)，这样当用户滚动鼠标滚轮时，zoomImage函数就会被调用，同时传递一个event参数表示当前的滚轮事件。

在zoomImage函数中，我们首先判断滚轮的方向（向上滚动或向下滚动），并计算出缩放的比例zoomAmount。然后，我们可以根据zoomAmount来执行特定的操作，比如调整图像的大小、改变图像的位置等。

在这个示例中，我只是简单地输出一条消息到控制台，表示正在缩放图片，并没有实现真正的缩放操作。您可以根据自己的需求，在zoomImage函数中编写具体的缩放代码。

运行代码效果图如下

输入事件

指用户在页面上输入内容时触发的事件。这些事件包括键盘事件、鼠标事件和触摸事件等。

输入事件案例

实时搜索事件

当用户在搜索框中输入文字时，可以触发实时搜索事件，例如自动匹配搜索关键词或显示相关搜索结果。

输入以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <input type="text" oninput="search(this.value)" />

  <script>
    function search(keyword) {
      console.log("搜索关键词：" + keyword);
      // 或者执行其他操作，例如实时显示搜索结果
    }
  </script>

      
</body>
</html>

这段代码创建了一个文本输入框，并使用JavaScript代码添加了一个键盘按下事件监听器。

首先，通过document.querySelector('#myInput')获取到具有id为"myInput"的输入框元素，并将其赋值给变量input。

然后，使用addEventListener方法将一个键盘按下事件（keydown）监听器添加到输入框上。当用户在输入框中按下键盘上的任意键时，该监听器会触发绑定的回调函数。

在这个示例中，回调函数打印"键盘按键被按下！"的消息到控制台。你可以根据需要在回调函数中执行其他操作。

运行代码效果图如下

表单验证事件

当用户在表单中输入内容并尝试提交时，可以触发表单验证事件，例如检查输入是否符合要求或显示错误信息。

输入以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <form onsubmit="validateForm(event)">
    <input type="text" required />
    <button type="submit">提交</button>
  </form>
  
  <script>
    function validateForm(event) {
      event.preventDefault();
      console.log("表单验证通过");
      // 或者执行其他操作，例如提交表单数据到服务器
    }
  </script>
      
</body>
</html>

这段HTML代码定义了一个表单，并在其onsubmit属性中绑定了一个名为validateForm的函数。当用户点击表单中的提交按钮或按下回车键时，validateForm函数会被调用，并将事件对象作为参数传递给它。

在validateForm函数中，我们可以执行表单验证操作，例如检查输入的内容是否符合要求。如果验证通过，我们可以阻止表单的默认提交行为，即使用event.preventDefault()方法来取消事件的默认行为。然后，您可以在函数中执行其他操作，例如将表单数据提交到服务器。

运行代码效果图如下

键盘事件

指当用户按下或释放键盘上的键时触发的事件。

键盘事件案例

快捷键事件

当用户按下特定的组合键时，可以触发快捷键事件，例如实现撤销、复制、粘贴等常用操作。

输入以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <textarea onkeydown="handleShortcut(event)"></textarea>

  <script>
    function handleShortcut(event) {
      if (event.ctrlKey && event.key === "g") {
        event.preventDefault();
        console.log("保存快捷键被触发");
        // 或者执行其他操作，例如保存当前内容
      }
    }
  </script>
      
</body>
</html>

在上面的代码中，我们给<textarea>元素绑定了onkeydown事件，并定义了一个名为handleShortcut的函数来处理事件。当用户按下键盘时，handleShortcut函数会被调用，并将事件对象作为参数传递给它。在函数中，我们通过判断event.ctrlKey和event.key的值来检测是否按下了组合键 Ctrl + g。

同时按下了 Ctrl 键并且按下的键是字母 g，则表示触发了保存快捷键。在函数中，我们使用event.preventDefault()方法来阻止默认的快捷键行为，例如浏览器保存页面的行为。然后，在控制台中输出一条保存快捷键被触发的消息。您可以根据需要，在函数中执行其他操作，例如保存当前文本框中的内容。

运行代码效果图如下

页面导航事件

当用户在网页上使用键盘方向键进行页面导航时，可以触发导航事件，例如切换焦点或改变当前元素状态。

输入以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <a href="another-page.html" onclick="handleLinkClick(event)">跳转到另一个页面</a>

  <script>
    function handleLinkClick(event) {
      event.preventDefault(); // 阻止默认的链接跳转行为
  
      // 执行其他操作
      console.log("链接被点击了");
      // 可以执行页面跳转、执行其他函数等
    }
  </script>
  
  
</body>
</html>

这段代码展示了如何在链接被点击时阻止默认的跳转行为，并执行其他操作。

具体来说，我们通过给链接添加onclick属性，将handleLinkClick函数绑定到了链接的点击事件上。在函数中，我们使用event.preventDefault()方法阻止了默认的跳转行为，然后执行其他操作。

运行代码效果图如下

输入法事件

指在用户使用输入法输入文本时触发的事件。

输入法事件案例

中英文切换事件

当用户在输入框中切换中英文输入法时，可以触发输入法切换事件，例如调整输入框样式或显示对应语言的提示信息

输入以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <input type="text" oninput="checkLanguage()" />

  <script>
    function checkLanguage() {
      var inputValue = document.querySelector("input").value;
      if (/[\u4E00-\u9FFF]/.test(inputValue)) {
        console.log("输入法切换为中文");
      } else {
        console.log("输入法切换为英文");
      }
    }
  </script>
      
</body>
</html>

上述代码展示了如何检测输入法的语言切换情况。当用户在输入框中键入字符时，oninput事件被触发并调用checkLanguage()函数。

在函数中，我们首先使用document.querySelector()方法获取页面中第一个<input>元素的值，并将其保存在变量inputValue中。然后，我们使用正则表达式/[\u4E00-\u9FFF]/来判断输入框中是否包含中文字符，如果包含，则说明用户正在使用中文输入法；否则，说明用户正在使用英文输入法。

在控制台输出相应的信息来帮助我们检查输入法的语言切换情况。这个功能可以帮助我们更好地处理中英文输入下的文本处理、输入验证等需求。

运行代码效果图如下

输入法联想事件

当用户输入拼音或英文单词时，可以触发输入法联想事件，例如显示可能的候选词或自动完成输入。

输入以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <input type="text" oninput="showSuggestions(this.value)" />

  <script>
    function showSuggestions(input) {
      const suggestions = getSuggestionsFromServer(input);
      console.log("输入法联想：" + suggestions);
      // 或者执行其他操作，例如显示联想词的下拉列表
    }
  
    function getSuggestionsFromServer(input) {
      // 向服务器发送请求，获取输入法联想建议
      // 返回联想建议的数组
      // 这里使用一个假数据来模拟联想建议
      const suggestions = [
        input + "a",
        input + "b",
        input + "c"
      ];
      return suggestions;
    }
  </script>
</body>
</html>

上述代码展示了如何在用户输入时使用输入法联想功能。当用户在输入框中键入字符时，oninput事件被触发并调用showSuggestions()函数。

在函数中，我们首先将用户输入的值作为参数传递给getSuggestionsFromServer()函数，该函数模拟向服务器发送请求来获取输入法联想建议。在实际应用中，您可以根据具体需求与后端进行交互，从服务器获取真实的联想建议。

在示例中，我们简单地使用一个模拟的数据数组来表示联想建议。这个模拟的数据数组中，每个联想建议都是用户输入值后面加上字母"a"、"b"和"c"。然后，我们通过控制台输出联想建议，以帮助我们检查联想结果。

运行代码效果图如下