当前位置: 首页 > article >正文

前端学习-事件对象与典型案例(二十六)

目录

前言

事件对象

目标

事件对象是什么

语法

获取事件对象

部分常用属性

示例代码

示例代码:评论回车发布

总结


前言

长风破浪会有时,直挂云帆济沧海。


事件对象

目标

能说出什么是事件对象

事件对象是什么

也是个对象,这个对象里有事件触发时的相关信息例如:鼠标点击事件中,事件对象就存了鼠标点在哪个位置等信息

使用场景可以判断用户按下哪个键,比如按下回车键可以发布新闻

可以判断鼠标点击了哪个元素,从而做相应的操作

语法

如何获取

在事件绑定的回调函数的第一个参数就是事件对象

一般命名为event,ev,e

元素.addEventListener('click',function(e){}//e为事件对象

获取事件对象

目标:能够使用常见事件对象属性

部分常用属性

type口 获取当前的事件类型>

clientX/clientY口 获取光标相对于浏览器可见窗口左上角的位置>

offsetX/offsetY获取光标相对于当前DOM元素左上角的位置 key口 用户按下的键盘键的值口 现在不提倡使用keyCode

示例代码

<!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>按钮</button>
  <script>
    const btn = document.querySelector('button');
    btn.addEventListener('click', function (e) {
      console.log(e.type);
    });
  </script>
</body>
​
</html>

示例代码:评论回车发布

<!DOCTYPE html>
<html lang="en">
​
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Input Box</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
​
    .input-container {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 10px;
      width: 500px;
    }
​
    textarea {
      width: 70%;
      height: 100px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      resize: none;
      position: relative;
      /* 设置相对定位,以便伪元素可以绝对定位 */
      box-sizing: border-box;
      /* 确保内边距和边框包含在宽度内 */
    }
​
    textarea::after {
      content: '庞嘉欣专属评论框';
      /* 伪元素内容 */
      position: absolute;
      /* 绝对定位 */
      bottom: 5px;
      /* 距离底部 5px */
      right: 5px;
      /* 距离右侧 5px */
      font-size: 0.8em;
      /* 字体大小 */
      color: #888;
      /* 字体颜色 */
      pointer-events: none;
      /* 确保伪元素不影响交互 */
      z-index: 1;
      /* 确保伪元素在内容之上 */
    }
​
    .button-counter-container {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
​
    button {
      padding: 20px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-bottom: 10px;
      margin-right: 40px;
      margin-top: 10px;
    }
​
    .counter {
      text-align: right;
      margin-right: 50px;
      margin-top: 25px;
    }
​
    .counter span {
      font-weight: bold;
    }
​
    #comments-container {
      margin-top: 20px;
      width: 500px;
    }
​
    .comment {
      margin-bottom: 10px;
      padding: 10px;
      border: 1px solid rgba(0, 0, 0, 0.5);
      border-radius: 5px;
      background-color: #ffffff;
    }
​
    .comment-time {
      font-size: 0.9em;
      color: #888;
      margin-top: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
​
    .comment-time span {
      font-size: 0.8em;
      color: #888;
    }
  </style>
</head>
​
<body>
  <div class="input-container">
    <textarea id="input-text" placeholder="发布一条友善的评论"></textarea>
    <div class="button-counter-container">
      <button id="submit-button">发布</button>
      <div class="counter">
        <span id="current-count">0</span>/200字
      </div>
    </div>
  </div>
​
  <div id="comments-container"></div>
​
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const inputText = document.getElementById('input-text');
      const currentCount = document.getElementById('current-count');
      const submitButton = document.getElementById('submit-button');
      const commentsContainer = document.getElementById('comments-container');
​
      inputText.addEventListener('input', function () {
        const count = inputText.value.length;
        currentCount.textContent = count;
      });
​
      function addComment() {
        const commentText = inputText.value.trim();
        if (commentText) {
          const now = new Date();
          const formattedTime = now.toLocaleString();
​
          const commentElement = document.createElement('div');
          commentElement.className = 'comment';
​
          const commentContent = document.createElement('span');
          commentContent.textContent = commentText;
​
          const commentTime = document.createElement('div');
          commentTime.className = 'comment-time';
​
          const timeSpan = document.createElement('span');
          timeSpan.textContent = formattedTime;
​
          const signatureSpan = document.createElement('span');
          signatureSpan.textContent = '^-^';
          signatureSpan.style.fontSize = '0.8em';
          signatureSpan.style.color = '#87CEEB';
​
          commentTime.appendChild(timeSpan);
          commentTime.appendChild(signatureSpan);
​
          commentElement.appendChild(commentContent);
          commentElement.appendChild(commentTime);
​
          commentsContainer.appendChild(commentElement);
​
          inputText.value = '';
          currentCount.textContent = '0';
        }
      }
​
      submitButton.addEventListener('click', addComment);
​
      inputText.addEventListener('keydown', function (event) {
        if (event.key === 'Enter' && !event.shiftKey) {
          event.preventDefault();
          addComment();
        }
      });
    });
  </script>
</body>
​
</html>


总结

千磨万击还坚劲,任尔东西南北风。


http://www.kler.cn/a/502131.html

相关文章:

  • 【C语言】获取文件属性
  • LeetCode 2270.分割数组的方案数:前缀和
  • ASP.NET Core 中使用 Cookie 身份验证
  • Android Room 报错:too many SQL variables (code 1 SQLITE_ERROR) 原因及解决方法
  • Spring Boot中的依赖注入是如何工作
  • 【数据库】四、数据库管理与维护
  • 25/1/13 算法笔记<嵌入式> 继续学习Esp32
  • uiautomator2 实现找图点击
  • 记一次学习skynet中的C/Lua接口编程解析protobuf过程
  • FreeSWITCH Sofia SIP 模块常用命令整理
  • 如何设计一个 RPC 框架?需要考虑哪些点?
  • 计算机网络 笔记 网络层1
  • 远程和本地文件的互相同步
  • 深度学习——pytorch基础入门
  • GPT 系列论文精读:从 GPT-1 到 GPT-4
  • 机器翻译优缺点
  • 2025第3周 | JavaScript中es7新增的特性
  • Kafka 超级简述
  • python中的if判断语句怎么写
  • 面向对象的基本概念
  • 如何选择 Dockerfile 的放置方式
  • Perl语言的语法
  • 【Git版本控制器--1】Git的基本操作--本地仓库
  • fastGpt 本地运行 mongo, 要加 directConnection=true 参数
  • 从电影《解密》,简单聊一聊现代密码学
  • Kubeflow:云原生机器学习工作流自动化开源框架详解