1.事件监听
目标:能够给 DOM元素添加事件监听
什么是事件?
事件是在编程时系统内发生的
动作
或者发生的事情
比如用户在网页上
单击
一个按钮
什么是事件监听?
就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为 绑定事件或者注册事件
比如鼠标经过显示下拉菜单,比如点击可以播放轮播图等等
事件监听三要素:
事件源:
那个dom元素被事件触发了,要获取dom元素
事件类型:
用什么方式触发,比如鼠标单击 click、鼠标经过 mouseover 等
事件调用的函数:
要做什么事
注意:
1. 事件类型要加引号
2. 函数是点击之后再去执行,每次
点击都会执行一次
小案例:
需求:点击关闭之后,顶部关闭
分析:
①:点击的是关闭按钮
②:关闭的是父盒子
核心:利用样式的显示和隐藏完成, display:none 隐藏元素 display:block 显示元素
<!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>Document</title>
<style>
.box {
position: relative;
width: 1000px;
height: 200px;
background-color: pink;
margin: 100px auto;
text-align: center;
font-size: 50px;
line-height: 200px;
font-weight: 700;
}
.close {
position: absolute;
right: 20px;
top: 10px;
width: 20px;
height: 20px;
background-color: skyblue;
text-align: center;
line-height: 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
我是广告
<div class="close">X</div>
</div>
<script>
// 目标:点击 close 的按钮 将 box 盒子 设置 display:none
// 1. 获取到 close 与 box 盒子
// 2. 给 close 的盒子 注册事件 事件类型 click
// 3. 将 box盒子 设置 style.display = none
const closed = document.querySelector('.close')
const box = document.querySelector('.box')
closed.addEventListener('click', function() {
box.style.display = 'none'
})
</script>
</body>
2. 事件监听版本
DOM L0
事件源.on事件 = function() { }
DOM L2
事件源.addEventListener(事件, 事件处理函数)
区别:
on方式会被覆盖,
addEventListener
方式可绑定多次,拥有事件更多特性,推荐使用
3.事件类型
3.1.鼠标事件(鼠标触发)
click 鼠标单击
mouseenter 鼠标经过
mouseleave 鼠标离开
3.2.焦点事件(表单获得光标)
focus 获得焦点
blur 失去焦点
3.3.键盘事件(键盘触发)
keydown 键盘按下触发
keyup 键盘抬起触发
4.文本事件(表单输入触发)
input 用户事件输入
案例:评论数字统计
需求:用户输入文字,可以计算用户输入的字数
分析:
①:判断用输入事件 input
②:不断取得文本框里面的字符长度, 文本域.value.length
③:把获得数字给下面文本框
<!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>
// 目标:当 文本域获取焦点时 让 span 标签 显示出来 opacity 1
// 1. 获取 id=tx 与 class=total 标签对象
// 2. 给 id=tx 的标签注册 focus 事件
// 3. 让 class=total 标签 显示 opacity
// 1. 获取 id=tx 与 class=total 标签对象
const tx = document.querySelector('#tx')
const total = document.querySelector('.total')
// 2. 给 id=tx 的标签注册 focus 事件
tx.addEventListener('focus', function() {
total.style.opacity = 1
})
// 目标:当 文本域失去焦点时 让 span 标签 隐藏 opacity 0
// 1. 给 tx 对象注册 失去焦点事件
// 2. 让 total 设置 opacity = 0
tx.addEventListener('blur', function() {
total.style.opacity = 0
})
// 目标:当 用户在 tx 里面输入内容时 需要统计 输入的字数 并且将其显示到 total对象里面
// 1. 需要给 tx 对象 注册 input 事件
// 2. 可以获取到 输入的内容 得到字符串的长度 字符串.length
// 3. 将长度写入到 total 里面即可
tx.addEventListener('input', function() {
const val = tx.value
total.innerHTML = `${val.length}/200字`
})
</script>
</body>