Web APIs学习第三天：事件
昨天才发现原来有markdown编辑器，遂尝试使用了一下，体验感很不错！
Web APIs学习Day3
学会通过为DOM注册事件，来实现可交互的网页特效。
- 能够判断函数运行的环境并确字 this 所指代的对象
- 理解事件的作用，知道应用事件的 3 个步骤
文章目录
- Web APIs学习Day3
- 事件
- 事件监听
- 事件类型
- 鼠标事件
- 焦点事件
- 键盘事件
- 文本事件（文本框输入）
- 事件对象
- 获取事件对象
- 环境对象
- 回调函数
事件
事件是编程语言中的术语，是在编程时系统内发生的动作或发生的事情。它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数。
例如：用户使用【鼠标点击】网页中的一个按钮、用户使用【鼠标拖拽】网页中的一张图片
事件监听
事件监听就是让程序检测是否有事件发生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或注册事件。结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。
比如说，鼠标经过显示下拉菜单、点击可以播放轮播图等等。
addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】。
语法：元素对象.addEventListener('事件类型', 要执行的函数)
事件监听三要素：
- 事件源：哪个 DOM 元素被事件触发了，要获取 DOM 元素
- 事件类型：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover等
- 事件调用的函数：要做什么事
比如说，当我们点击侧边导航栏中的某个栏目，页面会滑动到对应的栏目位置。这里事件源就是那个栏目，事件类型是 click，函数是页面滑动。
注意：
- 事件类型要加引号
- 函数是点击之后再去执行，每次点击都会执行一次
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件监听</title>
</head>
<body><h3>事件监听</h3><p id="text">为 DOM 元素添加事件监听，等待事件发生，便立即执行一个函数。</p><button class="btn">点击改变文字颜色</button><script>// 1. 获取事件源 button对应的 DOM 对象const btn = document.querySelector('.btn')// 2. 添加事件监听btn.addEventListener('click', function () {console.log('等待事件被触发...')// 改变 p 标签的文字颜色let text = document.getElementById('text')text.style.color = 'red'})// 3. 只要用户点击了按钮，事件便触发了！！！</script>
</body>
</html>
完成事件监听分成3个步骤：
- 获取 DOM 元素
- 通过
addEventListener方法为 DOM 节点添加事件监听 - 等待事件触发，如用户点击了某个按钮时便会触发
click事件类型 - 事件触发后，相对应的回调函数会被执行
大白话描述：所谓的事件无非就是找个机会（事件触发）调用一个函数（回调函数）。
补充知识：垃圾回收机制
在随机点名案例中，我们会在事件监听所调用的函数中使用随机数：
<button>点击</button>
<script>const btn = document.querySelector('button')btn.addEventListener('click', function () {const num = Math.random()console.log(num)})
</script>
代码没有报错，有朋友可能会注意到我们在事件调用函数中使用 const 来定义随机数，但是每点击一次随机数就不同，这和 const 不会矛盾吗？
其实由于 JavaScript 的垃圾回收机制，这是不矛盾的。每次点击后调用函数，使用完变量 num 后因为没有其他地方再次使用这个变量了，js 就把它当作垃圾变量删掉了。之后再次点击触法函数时，js 又再次新建 num 变量，分配新空间。因此旧的 num 和 新的 num 是不冲突的。
同理，全局变量和局部变量不冲突。
事件类型
将众多的事件类型分类可分为：鼠标事件、键盘事件、表单事件、焦点事件等，我们逐一展开学习：
鼠标事件
鼠标事件是指跟鼠标操作相关的事件，如单击、双击、移动等。
click 译成中文是【点击】的意思，它的含义是监听（等着）用户鼠标的单击操作，除了【单击】还有【双击】dblclick
<script>// 双击事件类型btn.addEventListener('dblclick', function () {console.log('等待事件被触发...');// 改变 p 标签的文字颜色const text = document.querySelector('.text')text.style.color = 'red'})// 只要用户双击击了按钮，事件便触发了！！！
</script>
【事件类型】决定了事件被触发的方式，如 click 代表鼠标单击，dblclick 代表鼠标双击。
鼠标经过mouseenter监听鼠标是否移入 DOM 元素；
鼠标离开mouseleave监听鼠标是否移出 DOM 元素:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: pink;}</style>
</head><body><div></div><script>const div = document.querySelector('div')// 鼠标进入事件 盒子背景颜色变成红色div.addEventListener('mouseenter', function () {div.style.backgroundColor = 'red'})// 鼠标离开事件 盒子背景颜色变成粉色div.addEventListener('mouseleave', function () {div.style.backgroundColor = 'pink'})</script>
</body></html>
焦点事件
focus获得焦点（光标），blur失去焦点（光标）。
<input type="text">
<script>const input = document.querySelector('input')// 1. 获得焦点事件input.addEventListener('focus', function () {console.log('获得焦点')})// 2. 失去焦点事件input.addEventListener('blur', function () {console.log('失去焦点')})
</script>
键盘事件
keydown键盘按下触发，keyup键盘抬起触发。在开发中还是建议使用keyup。
<input type="text">
<script>const input = document.querySelector('input')// 1. 获得键盘事件 键盘按下任意键触发input.addEventListener('keydown', function () {console.log('键盘按下')})// 2. 失去键盘事件 不再按压键盘input.addEventListener('keyup', function () {console.log('键盘抬起')})
</script>
文本事件（文本框输入）
input用户输入文本：
<input type="text">
<script>const input = document.querySelector('input')// 4. 文本事件input.addEventListener('input', function () {console.log(input.value) // 获得用户输入的内容})
</script>
事件对象
事件对象也是个对象，这个对象里有事件触发时的相关信息，例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等的信息。
使用场景：
- 可以判断用户按下哪个键，比如按下回车键可以发布新闻
- 可以判断鼠标点击哪个元素，从而做出相应的操作
获取事件对象
在事件绑定的回调函数的第一个参数就是事件对象，一般命名为 event、ev、e。
语法：元素.addEventListener('事件类型', function (e) {})
其中的e就是事件对象。
我们在代码中来查看一下这个e里到底有哪些东西：
<button>点击我</button>
<script>// 1. 获取元素const btn = document.querySelector('button')// 2. 绑定事件btn.addEventListener('click', function (e) {console.log(e)})
</script>
点击按钮后，在浏览器控制台中，我们可以看到一个对象，里面包含很多属性：
部分常用属性：
type：获取当前的事件类型clientX / clientY：获取光标（鼠标）相对于浏览器可见窗口左上角的位置offsetX / offsetY：获取光标（鼠标）相对于当前DOM元素左上角的位置key：用户按下的键盘键的值，注意，现在已不提倡使用 keyCode
环境对象
能够分析判断函数运行在不同环境中 this 所指代的对象。
环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境。
作用：弄清楚 this 的指向，可以让我们代码更简洁。
每个函数都有 this 环境变量。我们现在代码中体会一下什么是 this：
function fn(){console.log(this)
}fn()
// 相当于 window.fn() this指向window
打开控制台，可以发现：
这就说明了在普通函数中，this 其实指向的是 window。也就是说，是 window 调用了 this。
在事件监听中，又是不同的情况：
<button>点击我</button>
<script>const btn = document.querySelector('button')btn.addEventListener('click', function(){console.log(this)})
</script>
在控制台中，返回的是：
这说明在这个事件绑定函数中，this 指向的是 button。
其实，在不同函数中，this 指向的对象不同。根据经验，我们得到总结：
- 函数的调用方式不同，this 指代的对象也不同
- 谁调用函数，this 就是谁，就指向谁。这是判断 this 指向的粗略规则。其实 this 的指向是可以修改的，这是重难点
- 直接调用函数，其实相当于是 window.函数，所以 this 指代 window
现在认识了 this，在代码中，我们可以直接：
<button>点击我</button>
<script>const btn = document.querySelector('button')btn.addEventListener('click', function(){// btn.style.color = 'red' 相当于：this.style.color = 'red'})
</script>
有的时候，我们不知道当前调用函数的对象是谁，可以使用 this 来指代，这样就不需要再特意去找它了，是不是很方便~
回调函数
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数。
简单来说，就是当一个函数当作参数来传递给另外一个函数的时候，这个函数就是回调函数。
常见的场景：定时器函数
function fn() {console.log('我是回调函数...')
}
// fn传递给了 setInterval fn就是回调函数
setInterval(fn, 1000)
还有事件监听：
btn.addEventListener('click', function(){console.log('我是回调函数...')
})
回调回调，可以理解为回头调用，当然这么理解是不准确的，只是为了方便记忆。使用匿名函数作为回调函数比较常见。