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

前言

事件对象

目标

事件对象是什么

前言

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

事件对象

目标

能说出什么是事件对象

事件对象是什么

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

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

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

语法

如何获取

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

一般命名为event，ev，e

复制代码

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

获取事件对象

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

部分常用属性

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

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

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

示例代码

html 复制代码

<!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>

示例代码：评论回车发布

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>

总结

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