1.事件类型
（前文已经介绍了鼠标类型和键盘类型）
（1）焦点类型
<1> 事件.addEventListener('focus', function () {
console.log('获取焦点成功');
})
<2>事件.addEventListener('blur', function () {
console.log('失去焦点成功');
})
<body>
<input type="text" class="one">
<br>
<input type="text" class="two">
<script>
//焦点事件=》输入框 文本域
const one = document.querySelector('.one');
//1.获取焦点==》当输入框获取了焦点就会执行这个函数
one.addEventListener('focus', function () {
console.log('获取焦点成功');
})
//2.失去焦点==》当输入框失去焦点就会执行这个函数
one.addEventListener('blur', function () {
console.log('失去焦点成功');
})
//让two盒子自动获取焦点
const two = document.querySelector('.two');
two.focus();//意思就是页面一加载，焦点就在two这个盒子
</script>
</body>
案例：小米下拉框
<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
.mi {
position: relative;
width: 223px;
margin: 100px auto;
}
.mi .search-text {
width: 223px;
height: 48px;
padding: 0 10px;
font-size: 14px;
line-height: 48px;
border: 1px solid #e0e0e0;
outline: none;
}
/* 搜索框边框颜色 */
.mi .search {
border: 1px solid #ff6700;
}
/* 下拉菜单 */
.result-list {
display: none;
position: absolute;
left: 0;
top: 48px;
width: 223px;
border: 1px solid #ff6700;
border-top: 0;
background: #fff;
}
.result-list a {
display: block;
padding: 6px 15px;
font-size: 12px;
color: #424242;
text-decoration: none;
}
.result-list a:hover {
background-color: #eee;
}
</style>
</head>
<body>
<div class="mi">
<input type="search" placeholder="小米笔记本" class="search-text">
<ul class="result-list">
<li><a href="#">全部商品</a></li>
<li><a href="#">小米11</a></li>
<li><a href="#">小米10S</a></li>
<li><a href="#">小米笔记本</a></li>
<li><a href="#">小米手机</a></li>
<li><a href="#">黑鲨4</a></li>
<li><a href="#">空调</a></li>
</ul>
</div>
<script>
//需求：表单获取焦点显示下拉才当并且改变边框样式（类名 search）,当表单失去焦点，影藏下拉菜单 取消边框样式
//1.隐藏下拉菜单（css中）
//2.给表单绑定获取焦点事件
const search = document.querySelector('.search-text');
const list = document.querySelector('.result-list');
search.addEventListener('focus', function () {
//2.1表单有边框颜色
search.classList.add('search');
//2.2显示下拉菜单
list.style.display = 'block';
})
//3.给表单绑定失去焦点事件
search.addEventListener('blur', function () {
//3.1表单边框颜色
search.classList.remove('search');
//3.2隐藏下拉菜单
list.style.display = 'none';
})
</script>
</body>
</html>
（2）键盘事件
<body>
<input type="text">
<script>
const inp = document.querySelector('input');
//1.input 事件 文本事件=>输入框的value值发生改变就会触发
inp.addEventListener('input', function (e) {
console.log(inp.value);//获取输入框的值
})
//2.键盘事件
//2.1键盘按下
inp.addEventListener('keydown', function (e) {
console.log("我按下了一个键");//获取键盘的键值
})
//2.3键盘弹起
inp.addEventListener('keyup', function (e) {
console.log("弹起");//获取键盘的键值
})
</script>
</body>
<body>
<input type="text">
<script>
const inp = document.querySelector('input');
//1.input 事件 文本事件=>输入框的value值发生改变就会触发
inp.addEventListener('input', function (e) {
console.log(inp.value);//获取输入框的值
})
//2.键盘事件
//2.1键盘按下
inp.addEventListener('keydown', function (e) {
console.log("我按下了一个键");//获取键盘的键值
})
//2.3键盘弹起
inp.addEventListener('keyup', function (e) {
console.log("我按下了一个键");//获取键盘的键值
})
</script>
</body>
//统计评论字数
<!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 {
overflow: hidden;
width: 48px;
height: 48px;
margin-right: 20px;
border-radius: 50%;
background: url(./images/avatar.jpg) no-repeat center / cover;
}
.wrapper textarea {
flex: 1;
height: 30px;
padding: 10px;
border-color: transparent;
outline: none;
resize: none;
background: #f5f5f5;
border-radius: 4px;
transition: all 0.5s;
}
/* :focus是焦点获取器 当焦点一获取 就会执行这个样式*/
.wrapper textarea:focus {
height: 50px;
border-color: #e4e4e4;
background: #fff;
}
.wrapper button {
width: 70px;
margin-left: 10px;
border: none;
color: #fff;
background: #00aeec;
border-radius: 4px;
cursor: pointer;
}
.wrapper .total {
margin-right: 80px;
margin-top: 5px;
color: #999;
opacity: 0;
transition: all 0.5s;
}
.list {
display: flex;
min-width: 400px;
max-width: 800px;
}
.list .item {
display: flex;
width: 100%;
}
.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 {
padding: 10px 0;
color: #333;
font-size: 13px;
}
.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">2099-10-10 20:29:21</p>
</div>
</div>
</div>
<script>
//需求：文本域获取焦点就显示统计字数，失去焦点就隐藏
//1.获取元素 textarea id=“tx”
const tx = document.querySelector('#tx');
const total = document.querySelector('.total');
//2.给元素注册事件 获取焦点事件 统计字数，修改页面内容
tx.addEventListener('focus', function () {
//2.1显示统计字数的盒子 opacity:0==>1
total.style.opacity = 1;
})
//3.给元素注册事件 失去焦点事件
tx.addEventListener('blur', function () {
//2.1显示统计字数的盒子 opacity:1==>0
total.style.opacity = 0;
})
//4.统计字数 input文本事件
tx.addEventListener('input', function () {
//字符串也有长度属性，我们可以通过字符串.length获取字符串长度
//console.log(tx.value)
//trim()方法去除字符串首尾空格
console.log(tx.value.trim().length)
//拿到长度之后，替换total的文字
total.innerHTML = `${tx.value.trim().length}/200字`
})
</script>
</body>
</html>
2.事件对象
<body>
<input type="text">
<script>
//事件对象介绍
const inp = document.querySelector('input');
//1.key属性==>键盘事件的事件对象携带的属性
//e是事件对象
inp.addEventListener('keydown', function (e) {
console.log(e.key);//控制台输出用户按下的键
//e.key==>判断用户按下了哪个键
if (e.key === 'Enter') {
console.log('按下了回车键');
}
//e.target 得到触发事件的元素
console.log(e.target);
})
</script>
</body>
·案例：评论回车发布
<!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 {
overflow: hidden;
width: 48px;
height: 48px;
margin-right: 20px;
border-radius: 50%;
background: url(./images/avatar.jpg) no-repeat center / cover;
}
.wrapper textarea {
flex: 1;
height: 30px;
padding: 10px;
border-color: transparent;
outline: none;
resize: none;
background: #f5f5f5;
border-radius: 4px;
transition: all 0.5s;
}
/* :focus是焦点获取器 当焦点一获取 就会执行这个样式*/
.wrapper textarea:focus {
height: 50px;
border-color: #e4e4e4;
background: #fff;
}
.wrapper button {
width: 70px;
margin-left: 10px;
border: none;
color: #fff;
background: #00aeec;
border-radius: 4px;
cursor: pointer;
}
.wrapper .total {
margin-right: 80px;
margin-top: 5px;
color: #999;
opacity: 0;
transition: all 0.5s;
}
.list {
display: flex;
min-width: 400px;
max-width: 800px;
}
.list .item {
display: flex;
width: 100%;
}
.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 {
padding: 10px 0;
color: #333;
font-size: 13px;
}
.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">2099-10-10 20:29:21</p>
</div>
</div>
</div>
<script>
//需求：文本域获取焦点就显示统计字数，失去焦点就隐藏
//1.获取元素 textarea id=“tx”
const tx = document.querySelector('#tx');
const total = document.querySelector('.total');
//2.给元素注册事件 获取焦点事件 统计字数，修改页面内容
tx.addEventListener('focus', function () {
//2.1显示统计字数的盒子 opacity:0==>1
total.style.opacity = 1;
})
//3.给元素注册事件 失去焦点事件
tx.addEventListener('blur', function () {
//2.1显示统计字数的盒子 opacity:1==>0
total.style.opacity = 0;
})
//4.统计字数 input文本事件
tx.addEventListener('input', function () {
//字符串也有长度属性，我们可以通过字符串.length获取字符串长度
//console.log(tx.value)
//trim()方法去除字符串首尾空格
console.log(tx.value.trim().length)
//拿到长度之后，替换total的文字
total.innerHTML = `${tx.value.trim().length}/200字`
})
//5.回车发布评论
const item = document.querySelector('.item')
const txt = item.querySelector('.text')
//5.1 事件注册（键盘输入回车就发布评论）
tx.addEventListener('keyup', function (e) {
//5.2我们需要在事件中判断，判断用户按下了回车键(事件对象)
if (e.key === 'Enter') {
//5.3发布评论
//-让item盒子显示(原始状态是隐藏 none114)
item.style.display = 'flex'
//让text盒子中的内容变成用户输入的内容
txt.innerHTML = tx.value.trim()
//5.4清空输入框，统计文字归零
tx.value = ''
total.innerHTML = `${tx.value.trim().length}/200字`
//隐藏统计盒子
tx.blur()
}
})
//6.点击发布按钮也能发布评论
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
//5.3发布评论
//-让item盒子显示(原始状态是隐藏 none114)
item.style.display = 'flex'
//让text盒子中的内容变成用户输入的内容
txt.innerHTML = tx.value.trim()
//5.4清空输入框，统计文字归零
tx.value = ''
total.innerHTML = `${tx.value.trim().length}/200字`
//隐藏统计盒子
tx.blur()
})
</script>
</body>
</html>
3.环境对象-this
<script>
//1.在全局定义一个函数,则this指向window
function fn(){
console.log(this)
}
//window.fn()
//2.对象中的方法==>方法中的this指向了这个对象
const obj={
uname:'狗哥',
sing:function(){
console.log(this)
}
}
obj.sing()//此处是obj在调用sing方法，所以this指向obj
//3.间歇函数(也是Windows在调用，但可以省略不写)
setInterval(function(){
console.log(this)
},1000)
//4.事件==>this指向 事件源
const btn=document.querySelector('button')
btn.addEventListener('click',function(){
console.log(this)
//这里就是没有绑定this，但this是在事件源上，所以this就指向了事件源“button”
})
</script>
4.排他思想
<body>
<button class="active">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//需求：鼠标经过每一个盒子，当前盒子高亮显示
//1.先获取全部小盒子，给每一个小盒子添加事件（遍历）
const btns = document.querySelectorAll('button');
//拿到每一个小盒子
for (let i = 0; i < btns.length; i++) {
//2.给每一个小盒子添加鼠标经过事件
btns[i].addEventListener('mouseover', function () {
//先清除所有按钮的高亮
//再给当前的添加
for (let j = 0; j < btns.length; j++) {
btns[j].classList.remove('active');
}
//给当前添加
this.classList.add('active');
})
}
</script>
</body>
