学习目标：
- 掌握事件对象
学习内容：
- 获取事件对象
- 事件对象常用属性
trim方法- 案例
获取事件对象：
- 事件对象是什么
也是个对象，这个对象里有事件触发时的相关信息。
例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息。
-
使用场景
可以判断用户按下哪个键。比如按下回车键可以发布新闻可以判断鼠标点击了哪个元素，从而做相应的操作。
-
语法：如何获取
在事件绑定的回调函数的第一个参数就是事件对象。
一般命名为event、ev、e。
//e是事件对象元素.addEventListener('click', function (e) {})
<title>事件对象</title>
</head><body><button>点击</button><script>const btn = document.querySelector('button')btn.addEventListener('click', function (e) {console.log(e)})</script></body>
事件对象常用属性：
- 部分常用属性
type | 获取当前的事件类型 |
|---|---|
clientX/clientY | 获取光标相对于浏览器可见窗口左上角的位置 |
offsetX/offsetY | 获取光标相对于当前DOM元素左上角的位置 |
key | 用户按下的键盘键的值，现在不提倡使用keyCode |
<title>事件对象常用属性</title>
</head><body><input type="text"><script>const input = document.querySelector('input')input.addEventListener('keyup', function (e) {// console.log(e.key)if (e.key === 'Enter') {console.log('我按下了回车键')}})</script>
</body>trim方法:
<title>trim方法</title>
</head><body><textarea name="" id="" cols="30" rows="10"></textarea><script>const str = ' pink'// console.log(str.trim()) //trim 去除左右的空格const tx = document.querySelector('textarea')tx.addEventListener('keyup', function (e) {// console.log(tx.value)if (e.key === 'Enter') {console.log(tx.value.trim() === '') //true}})</script></body>
案例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><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">清风徐来</p><p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p><p class="time">2022-10-10 20:29:21</p></div></div></div><script>const tx = document.querySelector('#tx')const total = document.querySelector('.total')const item = document.querySelector('.item')const text = document.querySelector('.text')//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 () {// console.log(tx.value.length) 得到输入的长度total.innerHTML = `${tx.value.length}/200字`})//4.按下回车发布评论tx.addEventListener('keyup', function (e) {//只有按下的是回车键，才会触发if (e.key === 'Enter') {//如果用户输入不为空就显示和打印if (tx.value.trim() !== '') {item.style.display = 'block'// console.log(tx.value) //用户输入的内容text.innerHTML = tx.value}//等我们按下回车，结束，清空文本域tx.value = ''//按下回车之后，就要把字符统计 复原total.innerHTML = '0/200字'}})</script></body></html>
