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

最新推荐文章于 2024-06-15 17:01:16 发布

快习中学乐

最新推荐文章于 2024-06-15 17:01:16 发布

阅读量411

点赞数

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

本文链接：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"。然后，我们通过控制台输出联想建议，以帮助我们检查联想结果。

运行代码效果图如下

快习中学乐

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
探索Web交互的关键：元素焦点、鼠标、滚轮、输入和键盘事件

在Web交互中，元素焦点、鼠标、滚轮、输入和键盘事件都是非常关键的要素。它们允许用户与网页进行交互，并实现丰富的用户体验。我会用代码的形式让大家直观的感受这五大关键事件元素焦点指的是用户当前正在与之交互的元素。在HTML中，可以使用tab键或通过JavaScript来设置元素的焦点。焦点状态可以帮助用户导航、输入内容或执行操作。
复制链接

扫一扫