目录
一、DOM事件
1、事件监听/绑定事件
2、常用事件类型
2.1、鼠标事件（鼠标触发）
2.2 焦点事件（表单获得/失去光标）
2.3 键盘事件（键盘触发）
2.4 文本事件（表单输入触发）
3、当获~All 多个元素时，如何绑定事件
4、高阶函数--回调函数
5、环境对象this
6、排他思想
一、DOM事件
1、事件监听/绑定事件
语法： 元素.addEventListener ( '事件' , 要执行的函数（通常为匿名函数) )
2、常用事件类型
2.1、鼠标事件（鼠标触发）
1、click --> 点击事件
<div class="box"></div>
<script>
let box = document.querySelector('.box')
//绑定点击事件
box.addEventListener('click', function () {
console.log(1111);
})当鼠标点击到div元素就会触发点击事件
2、mouseenter --> 鼠标经过
<div class="box"></div>
<script>
let box = document.querySelector('.box')
//绑定鼠标经过
box.addEventListener('mouseenter', function () {
console.log('鼠标经过了div');
})当鼠标移动经过div时触发
3、mouseleave --> 鼠标离开
<div class="box"></div>
<script>
let box = document.querySelector('.box')
//绑定鼠标离开
box.addEventListener('mouseleave', function () {
console.log('鼠标离开了div');
})当鼠标在div中离开div范围后触发
4、mousemove --> 鼠标移动
<div class="box"></div>
<script>
let box = document.querySelector('.box')
//绑定鼠标移动
box.addEventListener('mousemove', function () {
console.log('鼠标离开了div');
})只要鼠标在div内移动都会触发
2.2 焦点事件（表单获得/失去光标）
1、focus --> 获得光标
<input type="text" value="落日听风">
<script>
let i = document.querySelector('input')
//绑定获得光标事件
i.addEventListener('focus', function () {
console.log(11);
})当点击进入input获得到光标后触发
2、blur --> 失去光标
let i = document.querySelector('input')
//绑定失去光标事件
i.addEventListener('blur', function () {
console.log(11);
})表单失去光标后触发
2.3 键盘事件（键盘触发）
1、keydown --> 键盘按下触发
<input type="text" value="落日听风">
<script>
let i = document.querySelector('input')
//绑定键盘按下触发
i.addEventListener('keydown', function () {
console.log(11);
})当在表单框中每按下一次键盘都会触发
2、keyup --> 键盘抬起触发
<input type="text" value="落日听风">
<script>
let i = document.querySelector('input')
//绑定键盘抬起触发
i.addEventListener('keyup', function () {
console.log(11);
})键盘在按下的时候不会触发，键盘抬起时触发
2.4 文本事件（表单输入触发）
1、input 用户输入事件
let i = document.querySelector('input')
//用户输入事件
i.addEventListener('input', function () {
console.log(11);
})3、当获~All 多个元素时，如何绑定事件
1、获取元素
2、遍历伪数组
3、在循环中绑定事件
<ul>
爱好
<li>爱吃鱼：<input type="checkbox">
<li>爱你一整天：<input type="checkbox"></li>
<li>i love you:<input type="checkbox"></li>
</li>
</ul>
<script>
let cks = document.querySelectorAll('input')
//遍历cks
for (let i = 0; i < cks.length; i++) {
cks[i].addEventListener('click', function () {
console.log(111);
})
}
</script>4、高阶函数--回调函数
高阶函数：可以被简单理解为函数的高级应用，JavaScript 中函数可以被当作【值】来对待， 基于这个特效实现函数的高级应用。
【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等
例如
什么是回调函数
如果将函数 A 作为参数传递给函数 B 时，我们称函数 A 为回调函数
简单理解：当一个函数当作参数来传递给另外一个函数的时候，这个函数就是回调函数
小结：
1.函数表达式
函数也是【数据】
把函数赋值给变量
2.回调函数
把函数当作另外一个函数的参数传递，这个函数就叫回调函数
回调函数的本质还是函数，只不过把它当作参数来使用
使用匿名函数作为回调函数比较常见
5、环境对象this
环境对象指的是 函数内部特殊的变量 this，它代表着当前函数运行时所处的环境
弄清 this 的指向，可以使代码更简洁
环境对象 this 是存在函数里面的
环境对象 this 就是一个对象
函数的调用方式不同，this 指代的对象不同
[谁调用，this 就是谁] 是判断 this 指向的粗略规则
例如：btn 调用了 this
<button>点击我</button>
<script>
let btn = document.querySelector('button')
btn.addEventListener('click', function () {
alert(this)
})
</script>例如：search 的事件监听
⚫ 如果直接调用函数，其实就是相当于 window 函数，所以 this 指代 window
6、排他思想
当前元素为 A 状态，其他元素为 B 状态
使用：
1.干掉所有人
使用 for 循环
2.复活他自己
通过 this 或者下标找到自己或对应的元素
（先干掉所有人，然后再复活我自己 this(当前)）
<style>
.orange {
background-color: orange;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<button class="orange">点击1</button>
<button class="orange">点击2</button>
<button class="orange">点击3</button>
<button class="orange">点击4</button>
<script>
let btn = document.querySelectorAll('button')
for (let i = 0; i < btn.length; i++) {
//给按钮绑定点击事件
btn[i].addEventListener('click', function () {
//this指向了当前选择的按钮，点谁就让谁变红色，并取消背景色
//排他第一步：干掉所有人（包括自己）
for (let j = 0; j < btn.length; j++) {
btn[j].classList.remove('orange')
btn[j].classList.remove('red')
}
//排他第二步：复活自己，并把背景色改为红色
this.classList.add('red')
})
}
</script>
