一、事件
1.什么是事件
事件是在编程时系统内发生的动作或者发生的事情，比如用户在网页上单击一个按钮。
2.什么是事件监听
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件
语法：
元素.addEventListener('事件',要执行的函数)
3.事件监听三要素
- 事件源：哪个DOM元素被事件触发了，要获取DOM元素
- 事件：用什么方式触发，比如鼠标单击click，鼠标经过mouseover等
- 事件调用函数：要做什么事
4.事件监听
//获取元素
let btn = document.querySelector('.btn');
//事件监听
btn.addEventListener('click', function(){
console.log('你好呀');
})
注意：
1.事件类型要加引号
2.函数是点击之后再去执行，每次点击都会执行一次
5.事件类型
A.鼠标事件（鼠标触发）
click：鼠标点击
mouseover：鼠标经过
mouseleave：鼠标离开
B.焦点事件（表单获得光标）
focus：获得焦点
blur：失去焦点
C.键盘事件（键盘触发）
Keydown：键盘按下触发
Keyup：键盘抬起触发
D.文本事件（表单输入触发）
input：用户输入事件
二、高阶函数
高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。
高阶函数的表达式和普通函数表达式并无本质上区别：
//函数表达式与普通函数本质是一样的
let counter = function(x,y){
return x+y
}
//调用函数
let result = counter(5,10)
console.log(result)
普通函数的声明与调用无顺序限制，推荐做法先声明再调用
函数表达式必须要先声明再调用
回调函数
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数。
简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
例：
function fn(){
console.log('我是回调函数')
}
//fn传递给了setInterval，fn 就是回调函数
setInterval(fn,1000)
box.addEventLinstener('click',function(){
console.log('我也是回调函数')
})
三、环境对象
环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
作用：弄清楚this的指向，可以让我们代码更简洁
- 函数的调用方式不同，this 指代的对象也不同
- 【谁调用， this 就是谁】 是判断 this 指向的粗略规则
- 直接调用函数，其实相当于是 window.函数，所以 this 指代 window
四、编程思想
排他思想
当前元素为A状态,其他元素为B状态
使用：
-
干掉所有人
使用for循环
-
复活他自己
通过this或者下标找到自己或者对应的元素
例：选美，有美女1到5号，选谁谁都的背景色改变
<!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>Document</title>
<style>
ul{
display: flex;
list-style: none;
}
li{
border: 1px solid #000;
}
</style>
</head>
<body>
<ul>
<li>美女1号</li>
<li>美女2号</li>
<li>美女3号</li>
<li>美女4号</li>
<li>美女5号</li>
</ul>
<script>
let lis = document.querySelectorAll('li')
for (let index = 0; index < lis.length; index++) {
lis[index].addEventListener('click',function(){
for (let j = 0; j < lis.length; j++) {
//全部背景色全为白色
lis[j].style.backgroundColor = '#fff'
}
//选谁谁背景色改变
this.style.backgroundColor = 'aqua'
})
}
</script>
</body>
</html>
