一、事件监听（绑定）
事件：在编程时系统发生的动作或者发生的事情
事件监听：让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件（比如，鼠标经过显示下拉菜单）
1.1事件监听
语法：元素对象.addEventListener('事件类型'， 要执行的函数)
事件监听的三要素：
- 事件源： 那个dom元素被事件触发了，要获取dom元素
- 事件类型： 用什么方法触发，比如鼠标单击click、鼠标经过mouseover等
- 事件调用的函数： 要做什么事
<button>按钮</button>
<script>
const btn = document.querySelector('.btn')
btn.addEventListener('click', function(){
alert('点击了~')
})
</script>
1.2事件监听版本
DOM L0
事件源.on事件 = function(){}
DOM L2
事件源.addEventListtener(事件， 事件处理函数)
区别：
on方式会覆盖， addEventListener方式可绑定多次， 拥有事件更多特性， 推荐使用
二、事件类型
鼠标事件 鼠标触发
click 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开
焦点事件 表单获得光标
focus 获得焦点
blur 失去焦点
键盘事件 键盘触发
Keydown 键盘按下触发
Keyup 键盘抬起触发
文本事件 表单输入
input 用户输入事件
三、事件对象
事件对象：对象，里面有事件触发时的相关信息
3.1获取事件对象
在事件绑定的回调函数的第一个参数就是事件对象，一般命名为event、ev、e
元素.addEventListener('click', function(e){
})
3.2事件对象常用属性
部分常用属性：
type： 获取当前的事件类型
clientX/ clientY： 获取光标相对于浏览器可见窗口左上角的位置
offsetX / offsetY：获取光标相对于当前DOM元素左上角的位置
key： 用户按下的键盘键的值；现在不提倡keyCode
四、环境对象(this）
环境对象： 指的是函数内部特殊的 变量this ,它代表着当前函数运行时所处的环境
作用： 弄清楚this的指向，可以让我们代码更简洁
- 函数的调用方式不同，this指代的对象也不同
- 【谁调用，this就是谁】 是判断this指向的粗略规则
- 直接调用函数，其实相当于是 window.函数， 所以 this 指代 window
五、回调函数
如果将函数A做为参数传递给函数B，我们就称函数A为 回调函数
