事件
什么是事件？ 事件是在编程时系统内发生的动作或者发生的事情。比如用户在网页上单击一个按钮
什么是事件监听？ 让浏览器检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件。
事件监听三要素：
1.事件源： 哪个dom元素被事件触发了
2.事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseenter 等
3.事件调用的函数： 要做什么事
语法：
let btnObj = document.querySelector('button')
// 点击 click
// 当按钮点击的时候，会来触发执行函数
btnObj.addEventListener('click', function () {
// 该函数也叫作事件处理函数，把做的事情，写在该函数里面
alert('哈哈，被点了')
})
注意： 1. 事件类型要加引号 2. 函数是点击之后再去执行，每次点击都会执行一次
随机点名案例：
// 数据数组
let arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
// 优化版
// 1. 避免多次点击开始按钮的bug
// 在开定时器之前先关闭上一次开启的定时器 ==> 可以确保只有一个定时器在运行
// 2. 抽完禁用按钮
// 2.1 在开始按钮点击的时候，判断数组的个数 ==> 代码写在开始按钮的点击事件处理函数里面
// 2.2 判断数组的个数为1的时候，就可以不用开定时器随机抽取了 ==> return 可以阻止后续代码的执行
// 2.3 把数组里面仅有的这一项给取出来，设置到qs中展示
// 2.4 还需要禁用开始和结束按钮
let qsObj = document.querySelector('.qs')
let startObj = document.querySelector('.start')
let endObj = document.querySelector('.end')
// timerId 存定时器的id ==> 以便将来用于关闭定时器
let timerId // timerId 变量声明在全局作用域，其是全局变量（在任何位置都可以使用）
// index 存随机抽取的人的下标
let index
// 开始按钮的点击功能
startObj.addEventListener('click', function () {
// 做判断，判断数组里面的个数还有多少个，当数组里面只有一个的时候，就可以不用开启定时器来随机抽取了
if (arr.length === 1) {
// 把数组里面仅有的这一项给取出来，设置到qs中展示
qsObj.innerHTML = arr[0]
// 还需要将按钮禁用掉（开始、结束）
// startObj.disabled = true
// endObj.disabled = true
// 2行连写
startObj.disabled = endObj.disabled = true
// 需要使用到return的特性：return之后的代码是不执行（不需要有返回值）
return
}
// 避免多次点击开始按钮的bug
// 思路：在每次开启定时器之前，先把上一次开启的定时器给关闭掉 ==> 可以确保定时器只能开一个
clearInterval(timerId)
timerId = setInterval(function () {
index = getRandom(0, arr.length - 1)
qsObj.innerHTML = arr[index]
console.log(arr[index])
}, 50)
})
// 结束按钮的点击功能
endObj.addEventListener('click', function () {
// 关闭定时器
clearInterval(timerId)
// 删除
arr.splice(index, 1)
console.log(arr)
})
了解：绑定事件DOM L0
使用on方式来注册事件
语法： 元素.on事件类型 = function(){}
注意： 有覆盖问题
btn.onclick = function () {
alert('哈哈')
}
btn.onclick = function () {
alert('嘻嘻')
}
//只会弹出嘻嘻
全选反选案例：
// 全选反选案例
// 功能2：点击下面三个多选框，反过来控制全选的选中状态
// 如何给下面三个多选框注册click??? ==> 记得for循环遍历伪数组
let checkAll = document.querySelector('#checkAll')
let cks = document.querySelectorAll('.ck')
let spanObj = document.querySelector('.all')
// for循环 循环遍历拿到每一个进行处理
// 全选只有一个，不需要for循环遍历，给其注册click事件
// 但是当给cks注册click的时候，就需要for循环了，因为是个伪数组（多个，三个ck）
// 全选功能
checkAll.addEventListener('click', function () {
for (let i = 0; i < cks.length; i++) {
cks[i].checked = checkAll.checked
}
// 优化01
// 控制span文字 ==> 判断全选的选中状态为选中的，span文字为取消，反之则为全选
// === true 直接省略
// if (checkAll.checked) {
// spanObj.innerHTML = '取消'
// } else {
// spanObj.innerHTML = '全选'
// }
// 简化 if ... else
// 语法： 条件 ? 满足 : 不满足
// checkAll.checked ? spanObj.innerHTML = '取消' : spanObj.innerHTML = '全选'
// 还可以在简化
// 三元 一般 用于取值
spanObj.innerHTML = checkAll.checked ? '取消' : '全选'
})
// 反选功能
for (let i = 0; i < cks.length; i++) {
cks[i].addEventListener('click', function () {
// 判断三个ck中是否 有未选中的
for (let j = 0; j < cks.length; j++) {
if (!cks[j].checked) {
// 优化02
// 遇到 === true ，直接省略不写
// 遇到 === false ，省略不写，还需要在前面加! 取反
// 逻辑运算符 && || ! ! 取反
// 目标是 cks[j].checked 结果为false，才让进if
checkAll.checked = false
spanObj.innerHTML = '全选'
return
}
}
checkAll.checked = true
spanObj.innerHTML = '取消'
})
}
高阶函数
高阶函数（函数表达式 、回调函数 ）
函数的高阶使用方式 ==> 把函数当成值来使用
函数表达式
回调函数：把一个函数当成参数传递给另外一个函数，就说该函数是个回调函数
