1. 事件监听
什么是事件?
事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮
什么是事件监听?
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件
比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等
语法:
元素对象.addEventListener('事件类型识', 要执行的函数)事件监听三要素:
事件源：那个dom元素被事件触发了，要获取dom元素
事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等
事件调用的函数：要做什么事
举例说明：
const button = document.querySelector('button')
button.addEventListener('click', function() {
console.log('你点击了！')
})注意：
1. 事件类型要加引号
2.函数是点击之后再去执行，每次点击都会执行一次
2. 事件监听版本
DOM LO
事件源.on事件 = function() {}DOM L2
事件源.addEventListener(事件, 事件处理函数)
区别：
on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用
发展史:
DQM L0：是 DOM 的发展的第一个版本; L：level
DOM L1：DOM级别1于1998年10月1日成为 W3C 推荐标准
DOM L2：使用 addEventListener 注册事件
DOM L3：DOM3 级事件模块在 DOM2 级事件的基础上重新定义了这些事件，也添加了一些新事件类型
3. 事件类型
鼠标事件：
click 鼠标点击
<button>点我</button>
<script>
const btn = document.querySelector('button')
btn.addEventListener('click', function() {
console.log('你点到我了！')
})
</script>mouseenter 鼠标经过
<button>按钮</button>
<script>
const btn = document.querySelector('button')
btn.addEventListener('mouseenter', function() {
console.log('我进来了！')
})
</script>mouseleave 鼠标离开
<button>按钮</button>
<script>
const btn = document.querySelector('button')
btn.addEventListener('mouseleave', function() {
console.log('我出来了！')
})
</script>焦点事件：
focus 获得焦点
<input></input>
<script>
const ipt = document.querySelector('input')
ipt.addEventListener('focus', function() {
console.log('获得焦点！')
})
</script>blur 失去焦点
<input></input>
<script>
const ipt = document.querySelector('input')
ipt.addEventListener('blur', function() {
console.log('失去焦点！')
})
</script>键盘事件：
keydown 键盘按下触发
<input></input>
<script>
const ipt = document.querySelector('input')
ipt.addEventListener('keydown', function() {
console.log('键盘按下')
})
</script>keyup 键盘抬起触发
<input></input>
<script>
const ipt = document.querySelector('input')
ipt.addEventListener('keyup', function() {
console.log('键盘抬起')
})
</script>文本事件：
input 用户输入事件
<input></input>
<script>
const ipt = document.querySelector('input')
ipt.addEventListener('input', function() {
console.log('您输入了内容！')
})
</script>4. 获取事件对象
事件对象是什么
也是个对象，这个对象里有事件触发时的相关信息
例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
使用场景
可以判断用户按下哪个键，比如按下回车键可以发布新闻
可以判断鼠标点击了哪个元素，从而做相应的操作
语法：如何获取
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e
元素.addEventListener('click', function(e) {
console.log(e)
})部分常用属性
type
获取当前的事件类型
clientX/clientY
获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY
获取光标相对于当前DOM元素左上角的位置
key
用户按下的键盘键的值
现在不提倡使用keyCode
5. 环境对象
环境对象：指的是函数内部特殊的变量 this，它代表着当前函数运行时所处的环境
作用：弄清楚 this 的指向，可以让我们代码更简洁
函数的调用方式不同，this 指代的对象也不同
[ 谁调用， this 就是谁 ] 是判断 this 指的粗略规则
直接调用函数，其实相当于是 window.函数，所以 this 指代 window
<button>按钮</button>
<script>
const btn = document.querySelector('button')
btn.addEventListener('click', function(e) {
console.log(this)
})
</script>6. 回调函数
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
简单理解: 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
常见的使用场景:
function fn() {
console.log('我是回调函数！')
}
setInterval(fn, 1000)
btn.addEventListener('click', function(e) {
console.log('我也是回调函数！')
})