目录
前言
长风破浪会有时，直挂云帆济沧海。
事件对象
目标
能说出什么是事件对象
事件对象是什么
也是个对象，这个对象里有事件触发时的相关信息例如:鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
使用场景可以判断用户按下哪个键，比如按下回车键可以发布新闻
可以判断鼠标点击了哪个元素，从而做相应的操作
语法
如何获取
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为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>总结
千磨万击还坚劲，任尔东西南北风。
标签：二十六,const,color,前端,案例,事件,5px,document,margin From： https://blog.csdn.net/m0_74246993/article/details/145093120