8.1获取事件对象
●事件对象是什么
也是个对象，这个对象里有事件触发时的相关信息
例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
●使用场景
可以判断用户按下哪个键，比如按下回车键可以发布新闻
可以判断鼠标点击了哪个元素，从而做相应的操作
●语法：如何获取
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e
8.2获取事件对象
●部分常用属性
➢type
获取当前的事件类型
➢ clientX / clientY
获取光标相对于浏览器可见窗口左上角的位置
➢ offsetX / offsetY
获取光标相对于当前DOM元素左上角的位置
➢key
用户按下的键盘键的值
现在不提倡使用keyCode
【示例】
<body>
<input type="text">
<script>
const input = document.querySelector('input')
input.addEventListener('keyup', function (e) {
if (e.key === 'Enter') {
console.log('我按下了回车')
}
})
</script>
</body>
●案例-按下回车发布评论
需求：按下回车键盘，可以发布信息
分析:
①用户按下键盘事件keydown或者keyup都可以
②如果用户按下的是回车键盘，则发布信息
③让留言信息模块显示，把拿到的数据渲染到对应标签内部
【示例代码】
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>评论回车发布</title>
<style>
.wrapper {
min-width: 400px;
max-width: 800px;
display: flex;
justify-content: flex-end;
}
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
background: url(./images/avatar.jpg) no-repeat center / cover;
margin-right: 20px;
}
.wrapper textarea {
outline: none;
border-color: transparent;
resize: none;
background: #f5f5f5;
border-radius: 4px;
flex: 1;
padding: 10px;
transition: all 0.5s;
height: 30px;
}
.wrapper textarea:focus {
border-color: #e4e4e4;
background: #fff;
height: 50px;
}
.wrapper button {
background: #00aeec;
color: #fff;
border: none;
border-radius: 4px;
margin-left: 10px;
width: 70px;
cursor: pointer;
}
.wrapper .total {
margin-right: 80px;
color: #999;
margin-top: 5px;
opacity: 0;
transition: all 0.5s;
}
.list {
min-width: 400px;
max-width: 800px;
display: flex;
}
.list .item {
width: 100%;
display: flex;
}
.list .item .info {
flex: 1;
border-bottom: 1px dashed #e4e4e4;
padding-bottom: 10px;
}
.list .item p {
margin: 0;
}
.list .item .name {
color: #FB7299;
font-size: 14px;
font-weight: bold;
}
.list .item .text {
color: #333;
padding: 10px 0;
}
.list .item .time {
color: #999;
font-size: 12px;
}
</style>
</head>
<body>
<div class="wrapper">
<i class="avatar"></i>
<textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
<button>发布</button>
</div>
<div class="wrapper">
<span class="total">0/200字</span>
</div>
<div class="list">
<div class="item" style="display: none;">
<i class="avatar"></i>
<div class="info">
<p class="name">Kai</p>
<p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p>
<p class="time">2023-07-30 10:41:21</p>
</div>
</div>
</div>
<script>
const tx = document.querySelector('#tx')
const total = document.querySelector('.total')
//1.当文本域获得了焦点，就让 total 显示出来
tx.addEventListener('focus', function () {
total.style.opacity = 1
})
//2.当文本域失去焦点，就让 total 隐藏起来
tx.addEventListener('blur', function () {
total.style.opacity = 0
})
// 3.用户输入
tx.addEventListener('input', function () {
total.innerHTML = `${tx.value.length}/200字`
})
// 4.按下回车发布评论
const item = document.querySelector('.item')
const text = document.querySelector('.text')
tx.addEventListener('keyup', function (e) {
if (e.key === 'Enter') {
if (tx.value.trim()) { //trim() 去除左右空格
//显示评论
item.style.display = 'block'
text.innerHTML = tx.value
}
//按下回车 清空文本框和字数
tx.value = ''
total.innerHTML = '0/200字'
}
})
</script>
</body>
</html>
8.3 trim()方法
作用：去除左右空格
【示例】
<script>
const str = ' blue or pink '
console.log(str.trim())
</script>
