1. 事件绑定
事件是指系统内发生的动作或者发生的事情，例如用户在网页上单击了一个按钮，一旦事件触发，就立即调动一个函数做出响应，也叫注册事件
事件监听的三大要素是：
- 事件源：要获取的dom元素
- 事件：click，mouseover等，事件要加引号
- 事件调用的函数：function（）
事件监听的版本：
老版本是事件源.on事件=function()，新版本是事件源.addEvenListence('事件',function(){})。老版本有一些比较大的限制性，例如不允许给事件绑定同名事件，如果做了那么后面绑定的事件会将前面绑定的事件覆盖；同时它不能设置什么阶段触发事件。新版本的方法有兼容性问题，不过只是不支持IE9以下的，所以影响不大。
事件类型：
- 鼠标类型：click，mosueenter鼠标经过，mouseleave鼠标离开
- 焦点事件：focus获得焦点，blur失去焦点
- 键盘事件：keydown键盘按下，keyup键盘抬起
- 文本事件：input用户输入事件
2. 实现全选反选操作的几种思路
1.全选思路：
选中全选框，然后把全选框这个元素的checked状态赋予给下面的复选框，由于checked属性的返回值为选中为true，没选中为false，所以方便了赋值和判断操作。
实现代码：
//获取id为checkAll的input全选框标签元素
let checkAll = document.querySelector('#checkAll')
//获取类名为all的span文字标签元素
let all = document.querySelector('.all')
//获取3个类名为ck的input复选框标签元素
let checks = document.querySelectorAll('.ck')
// 全选状态赋予下面所有复选框
checkAll.addEventListener('click', function () {
let state = checkAll.checked
// 全选框checked状态为true就设置文字‘全选’，否则显示‘取消’
all.innerText = state ? '全选' : '取消'
for (let i = 0; i < checks.length; i++) {
//把全选框的checked值给这个复选框的checked
checks[i].checked = state
}
})
2.反选思路一：
取消选中复选框让全选框取消选中或选中所有复选框让全选框选中，实现这个功能的主要思路是通过for循环给每个复选框绑定一个点击事件，然后判断每个复选框是否为选中或未选中。而实现具体的判断复选框状态有几种思路。
第一种思路是声明一个flag变量为true，然后通过嵌套的for循环遍历获取到的伪数组里每个复选框的checked值是否为false，有一个为false就覆盖改变flag的值为false，并赋予给全选框的checked的值。
//外面的for循环遍历给每个复选框添加点击事件绑定，程序一开始就运行，addEventListener全部添加完就已经结束了
// 此时如果点击动作发生，程序从addEventListener事件开始运行，而不是每一次点击都从for循环开始。
for (let i = 0; i < checks.length; i++) {
checks[i].addEventListener('click', function () {
console.log(checks[i]);
//这里flag的位置要放在这里，让它点击一次才声明一次为true
let flag = true
// 遍历每个复选框看是否有一个为非选中，是就全选框为false，否则使用默认值flag=true
for (let j = 0; j < checks.length; j++) {
if (checks[j].checked == false) {
flag = false
}
}
checkAll.checked = flag
// 复选框flag的状态为true就设置上面文字‘全选’，否则显示‘取消’
all.innerText = flag ? '全选' : '取消'
})
}
3.反选思路二：
第二种思路是把声明一个count变量为0，然后通过for循环遍历获取到的伪数组里每个复选框的值判断是否为true，是就count++得出checked为true的个数。然后判断count的数量是否等于伪数组.length，是就给全选框checked状态赋值为true，否则为false。
for (let i = 0; i < checks.length; i++) {
checks[i].addEventListener('click', function () {
let count = 0
for (let j = 0; j < checks.length; j++) {
//如果当前复选框checked为true，则给count加1
if (checks[j].checked == true) {
count++
}
}
//判断count的true总数是否等于复选框数组的长度，等于就是都为选中的
if (count == checks.length) {
checkAll.checked = true
all.innerText = '全选'
} else {
checkAll.checked = false
all.innerText = '取消'
}
})
}
3.反选思路三：
第三种思路是通过document.querySelectorAll('.复选框类名:checked').length的方式直接获取复选框checked值为选中状态的伪数组长度，然后比较这个长度是否等于复选框整个伪数组的长度，直接省略了上面两个思路的for循环遍历。
for (let i = 0; i < checks.length; i++) {
checks[i].addEventListener('click', function () {
//获取复选框checked值为选中状态的伪数组长度
//:checked是css里的伪元素
let count = document.querySelectorAll('.ck:checked').length
if (count == checks.length) {
checkAll.checked = true
all.innerText = '取消'
} else {
checkAll.checked = false
all.innerText = '全选'
}
})
}
另外，如果把上面三种反选思路的for循环替换成foreach遍历也是一样的操作，遍历的代码也能更加简洁一点。
