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>
![[php-cos]ThinkPHP项目集成腾讯云储存对象COS](https://img-blog.csdnimg.cn/7a14efad19744bcf9db01ec31dc9e86b.png)
