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

前言

事件对象

目标

事件对象是什么

语法

获取事件对象

部分常用属性

示例代码

示例代码：评论回车发布

总结

前言

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

事件对象

目标

能说出什么是事件对象

事件对象是什么

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

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

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

语法

如何获取

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

一般命名为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>