第二天（事件监听）
目标：能够给DOM元素添加 事件监听
语法：
元素.addEventListener('事件',要执行的函数)
复制代码什么是事件？
事件是在编程时系统内发生的动作或者发生的事情
比如点击按钮 click
什么是事件监听？
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件
事件监听三要素是什么？
事件源 (谁被触发了)
事件 (用什么方式触发，点击还是鼠标经过等)
事件处理程序 （要做什么事情）
事件案例1
<script>
/*
触发事件dom元素
事件类型
事件触发了 做业务 函数
*/
let btn1 = document.querySelector('.btn1');
// 注册事件
// btn1.addEventListener("事件类型","处理函数")
// click 鼠标单击
btn1.addEventListener('click', function () {
console.log('开始抽奖啦');
});
let btn2 = document.querySelector('.btn2');
btn2.addEventListener('click', function () {
console.log('退出抽奖啦');
});
let div = document.querySelector('div');
// mouseover 鼠标移入到 div 的区域内
div.addEventListener('mouseover', function () {
console.log('小哥快点进来');
});
</script>
复制代码事件案例2 ：点击按钮溢出，就减少一次
<button>1000</button>
<script>
// 点击一下 按钮 按钮中的1000 - 1
// 点击一下 999
// 点击一下 998
// 点击一下 997
// 。。。。
let button = document.querySelector('button');
// 注册 绑定点击事件
button.addEventListener('click', function () {
// 1 获取一下 按钮中的文本
// console.log(button.innerText);
// let num = button.innerText;// 数据类型是字符串 比较注意 做 + 运算
// console.log(num + 1);// 字符串拼接
// console.log(num - 1);// 隐式转换 转成成数字
// button.innerText = button.innerText - 1;// 不用担心变成字符串
// button.innerText = button.innerText + 1;// + 变成字符串
// num = num -1 // num-=1 // --num
// button.innerText -= 1;
// 字符串 ++ 或者 -- 也会做隐式转换！！
// --button.innerText;
// ++button.innerText
// button.innerText += 1; // 不会做隐式转换
button.innerText--;
// 学js基础 先入一个门 没有经常写个不同的案例，怎么可能 刚刚学完js = 精通案例的实现！！
// 在后期的阶段中 不断写案例 新技术 巩固旧的案例的知识 ！！
// 我几天学完了webapi 精通 做js案例 很多案例的设计 使用技巧 都没有碰到
});
</script>
复制代码案例3随机点名
需求：点击按钮之后，随机显示一个名字，如果没有显示则禁用按钮
-
老师的实现过程 不是按照现在代码的结构 上到下 一口气写完
-
给两个按钮注册了两个点击事件 分别测试他们的功能
-
再在两个按钮中 实现 一个开启 定时器 一个关闭定时器
-
再在开启的定时器中 来编写业务逻辑
<script>
/*
1 按钮1
1 注册点击事件 开启定时器
2 定时器内部
1 随机获取一个下标（提前把 名字数组定义好）
2 数组[下标] 要显示的名称
3 要显示名称 设置到 dom元素中
2 按钮2
1 清除按钮1 中 定时器
3 开启定时器要做的工作
*/
let btn1 = document.querySelector('.btn1');
let btn2 = document.querySelector('.btn2');
let h1 = document.querySelector('h1');
// 声明一个全局变量
let timeId;
// 注册开启定时器 点击事件
btn1.addEventListener('click', function () {
// 开启定时器 返回定时器id 用来清除定时器
// 声明变量的时候 如果 不使用let 关键字 它变成了全局变量
// 不推荐！！ 代码不规范
timeId = setInterval(function () {
// 定时器的业务
let arr = ['张飞', '赵云', '刘备', '吕布', '刘婵'];
// 根据数组的长度来获取随机数
let index = Math.round(Math.random() * (arr.length - 1));
h1.innerText = arr[index];
}, 100);
});
// 注册清除定时器 点击事件
btn2.addEventListener('click', function () {
clearInterval(timeId);
});
</script>
复制代码事件类型
常见事件类型
| click | 单击事件 |
|---|---|
| mouseenter | 鼠标进入，当鼠标进入到该元素的范围就会自动触发 |
| mouseleave | 鼠标离开，鼠标离开该元素的范围就会自动触发 |
| input | 文本输入框内容变化所触发的事件，只要内容变化就会触发 |
| fcous | 文本框聚焦事件，文本框获取焦点，焦点就是光标点 |
| change | 文本框失焦事件，前提是内容改变了 |
| blur | 文本框的失焦事件，只要失焦就会触发，不关注内容是否变化 |
| keydown | keydown键按下时自动触发 |
| keyup | 键松开时自动触发 |
| change | 对于表单元素file而言，它 是用户选择好文件之后触发 |
高阶函数
目标：掌握高阶函数用法，实现函数更多使用形式
高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。
【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。
学习路径：1.表达式 2.回调函数
案例
全选文本框案例
需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消,文字对应变化
①：全选复选框点击，可以得到当前按钮的 checked
②：把下面所有的小复选框状态checked，改为和全选复选框一致
③：如果当前处于选中状态，则把文字改为取消， 否则反之
- 获取 全选标签 绑定点击事件 checkAll
- 点击事件触发后 获取 复选框的选中属性 checkAll.checked
- 把全选按钮的选中状态 设置到每一个 其他复选框中
- 数组和循环思想 解决重复工作的
代码图
<script>
/*
1 获取全选按钮和 一组 商品复选按钮
2 给全选按钮绑定点击事件
3 给一组商品 绑定点击事件
*/
let checkAll =document.querySelector("#checkAll");
let checkboxList =document.querySelectorAll(".ck");
checkAll.addEventListener('click',function(){
for(let index=0;index< checkboxList.length;index++){
checkboxList[index].checked = checkAll.checked;
}
});
//
for(let index=0; index<checkboxList.length;index++){
checkboxList[index].addEventListener('click',function(){
let checked =isAllChecked();
checkAll.checked=checked;
});
}
function isAllChecked(){
let checkedNum =0;
for(let index =0;index<checkboxList.length;index++){
// 判断为true
if(checkboxList[index].checked){
checkedNum++;
}
}
if(checkedNum ===checkboxList.length){
return true;
}else{
return false;
}
}
</script>
复制代码小米搜索框案例
需求：当表单得到焦点，显示下拉菜单，失去焦点隐藏下来菜单
①：开始下拉菜单要进行隐藏
②：表单获得焦点 focus，则显示下拉菜单，并且文本框变色（添加类）
③：表单失去焦点，反向操作
<div class="mi">
<input type="search" placeholder="小米笔记本" />
<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>
/*
1.获取元素
2.输入添加聚焦事件
3.为输入框添加失角事件
*/
let input =document.querySelector("input");
let ul =document.querySelector('ul');
let li =document.querySelectorAll('li');
input.addEventListener('click',function(){
ul.style.display="block";
})
input.addEventListener('blur',function(){
ul.style.display='none';
})
</script>
复制代码微博输入案例
需求：用户输入文字，可以计算用户输入的字数
分析：
①：判断用输入事件 input
②：不断取得文本框里面的字符长度
<div class="w">
<div class="controls">
<img src="images/tip.png" alt="" /><br />
<textarea
placeholder="说点什么吧..."
id="area"
cols="30"
rows="10"
maxlength="200"
></textarea>
<div>
<span class="useCount">0</span>
<span>/</span>
<span>200</span>
<button id="send">发布</button>
</div>
</div>
<div class="contentList">
<ul></ul>
</div>
</div>
<script>
// 1.获取元素
let textarea =document.querySelector('textarea');
let useCount= document.querySelector('.useCount');
// 为添加文本的事件
textarea.addEventListener('input',function(){
useCount.innerText =textarea.value.trim().leng``th;
});
</script>
复制代码环境变量
能够分析判断函数运行在不同环境中this所指代的对象
环境对象指的是函数内部特殊的变量this，它代表当前函数运行时所处的环境作用：
谁调用 ，this就是谁
<script>
// 1获取每一个li标签
// 2 li标签 点击事件
// 3事件触发 设置被点击的li标签 选中的样式
// 4.写处理其他所有的元 让他们的背景颜色变成白色
//
let items =document.querySelectorAll('.tab-item');
let main =document.querySelectorAll('.main');
/*
1.给标题标签 给他们绑定点击事件
2.事件触发 开始使用排他思想
1.获取所有的要设置标题样式的标签 遍历他们 移除他们
2.通过this 给自己
*/
for(let i=0;i<items.length;i++){
items[i].addEventListener('click',function(){
for(let i=0;i<items.length;i++){
items[i].classList.remove('active');
}
this.classList.add('active');
// 处理图片显示部分
for(let j=0;j<main.length;j++){
main[j].classList.remove('active');
}
main[i].classList.add('active');
});
}
</script>
复制代码