一：事件类型
1 鼠标事件
常见鼠标事件
鼠标点击事件：’click‘
鼠标移入事件：‘mouseenter’
鼠标离开事件：‘mouseleave’
鼠标经过事件区别
mouseover和mouseout会有冒泡效果
mouvseenter和mouseleave没有冒泡效果
2 焦点事件
获得焦点：focus
失去焦点：blur
3 键盘事件
键盘按下触发：keydown
键盘弹起触发：keyup
4 文本事件
文本框输入内容触发：input
以上事件类型，通常搭配侦听器一起使用
二：事件对象
1 什么是事件对象
事件是一个对象，事件对象中存储着事件触发时的相关信息
例如：
文本事件触发，能获取到在哪个文本框输入的信息
鼠标点击时，事件对象存储了鼠标点击的位置
2 事件对象在哪里
在事件绑定的回调函数的第一个参数就是事件对象
//以按钮点击事件为例
btn.addEventListener('click',function(event/e){
})
//在回调函数第一个参数中填写event或者e，就可以在回调函数中
//通过event/e.属性/方法的方式找到事件对象中有的属性和方法
3 事件对象常用属性
- type,获取当前的事件类型
- clientX/clientY,获取光标相对于浏览器可见窗口左上角的位置
- offsetX/offsetY,获取光标相对于当前DOM元素左上角的位置
- key用户按下的键盘键的值
- 现在keyCode已经被抛弃
三：事件解绑
语法格式：
removeEventListener(事件类型，事件处理函数，[获取捕获或冒泡阶段])
function fn(){
....
}
btn.removeEventListener('click',fn)
重点：匿名函数无法解绑
四:案例评论回车发布消息
1 需求：
2 代码实现后样式：
3 代码：
<!DOCTYPE html>
<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">清风徐来</p>
<p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p>
<p class="time">2022-10-10 20:29:21</p>
</div>
</div>
</div>
<script>
const item = document.querySelector('.item')
const textarea = document.querySelector('textarea')
const pContent = document.querySelector('.text')
textarea.addEventListener('keyup', function (e) {
//Enter键，E大写
if (e.key === 'Enter') {
if (textarea.value.trim() !== '') {
item.style.display = 'block'
pContent.innerHTML = textarea.value
}
textarea.value = ''
}
})
</script>
</body>
</html>
