# day02 - Web APIs

学习目标：
掌握事件绑定处理和事件对象，完成常见网页交互

# 1. 事件监听（绑定）

什么是事件？
- 用户行为被程序侦测到。
- 比如：用户点击一个按钮。
什么是事件监听？
- 让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应。
- 比如：鼠标经过显示下拉菜单，比如点击可以播放轮播图等等。
语法： 元素对象.addEventListener('事件类型'，要执行的函数)
事件监听三要素
- 事件源：哪个 dom 元素被事件触发了，要获取 dom 元素
- 事件类型：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
- 事件调用的函数：要做什么事情

示例：

<button>点击</button>
<script>
    // 需求： 点击了按钮，弹出一个对话框
    // 1. 事件源   按钮  
    // 2.事件类型 点击鼠标   click 字符串
    // 3. 事件处理程序 弹出对话框
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
        alert('你早呀~')
    })
</script>

注意：

事件类型要加引号
函数是点击之后再去执行，每次点击都会执行一次

总结：

什么是事件监听？
事件监听三要素是什么？

# 1.2 案例：京东点击关闭顶部广告

需求：点击关闭之后，顶部关闭

分析：

点击的是关闭按钮
关闭的是父盒子
核心：利用样式的显示和隐藏完成， display:none 隐藏元素 display:block 显示元素

# 1.3 拓展阅读 - 事件监听版本

之前版本
- 事件源.on 事件 = function ()
现在版本
- 事件源.addEventListener (事件，事件处理函数)
区别
- on 方式会被覆盖，addEventListener 方式可绑定多次，拥有事件更多特性，推荐使用

示例代码：

<button>点击</button>
<script>
    const btn = document.querySelector('button')
    // btn.onclick = function () {
    //   alert(11)
    // }
    // btn.onclick = function () {
    //   alert(22)
    // }

    // let num = 10
    // num = 20
    btn.addEventListener('click', function () {
        alert(11)
    })
    btn.addEventListener('click', function () {
        alert(22)
    })
</script>

# 2. 事件类型

鼠标事件

事件名称	触发方式
click	鼠标点击
mouseenter	鼠标经过
mouseleave	鼠标离开

焦点事件

事件名称	触发方式
focus	获得焦点
blur	失去焦点

键盘事件

事件名称	触发方式
Keydown	键盘按下触发
Keyup	键盘抬起触发

输入框事件

事件名称	触发方式
input	用户输入触发
change	输入框内容改变触发

# 2.2 案例：轮播图点击切换

需求：当点击左右的按钮，可以切换轮播图

分析：

右侧按钮点击，变量 ++，如果大于等于 8，则复原 0
左侧按钮点击，变量 --，如果小于 0，则复原最后一张
鼠标经过暂停定时器
鼠标离开开启定时器

# 2.3 案例：小米搜索框案例

需求：当表单得到焦点，显示下拉菜单，失去焦点隐藏下来菜单

分析：

开始下拉菜单要进行隐藏
表单获得焦点 focus，则显示下拉菜单，并且文本框变色（添加类）
表单失去焦点，反向操作

# 2.4 案例：评论字数统计

需求：用户输入文字，可以计算用户输入的字数

分析：

判断用输入事件 input
不断取得文本框里面的字符长度，文本域.value.length
把获得数字给下面文本框

# 3. 事件对象

事件对象是什么？
- 也是个对象，这个对象里有事件触发时的相关信息
- 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
使用场景
- 可以判断用户按下哪个键，比如按下回车键可以发布新闻
- 可以判断鼠标点击了哪个元素，从而做相应的操作

# 3.1 获取事件对象

如何获取：
- 在事件绑定的回调函数的第一个参数就是事件对象
- 一般命名为 event、ev、e

总结：

事件对象是什么？
事件对象怎么获取？

# 3.2 事件对象常用属性

部分常用属性

type：获取当前的事件类型
clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY：获取光标相对于当前 DOM 元素左上角的位置
key：用户按下的键盘键的值

示例：

const input = document.querySelector('input')
input.addEventListener('keyup', function (e) {
    // console.log(11)
    console.log(e)
    if (e.key === 'Enter') {
        console.log('我按下了回车键')
    }
})

# 3.2.2 案例：评论回车发布

需求：按下回车键盘，可以发布信息

分析：

用到按下键盘事件 keydown 或者 keyup 都可以
如果用户按下的是回车键盘，则发布信息
让留言信息模块显示，把拿到的数据渲染到对应标签内部

# 4. 环境对象

目标：能够分析判断函数运行在不同环境中 this 所指代的对象
环境对象：指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
作用：弄清楚 this 的指向，可以让我们代码更简洁

函数的调用方式不同，this 指代的对象也不同
【谁调用， this 就是谁】是判断 this 指向的粗略规则
直接调用函数，其实相当于是 window. 函数，所以 this 指代 window

总结：

环境对象 this 是什么？
判断 this 指向的粗略规则是什么？

# 5. 回调函数

目标：能够说出什么是回调函数
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
简单理解：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

总结：

把函数当做参数传递，这个函数就叫回调函数
回调函数本质还是函数，只不过把它当成参数使用
使用匿名函数做为回调函数比较常见

# 6. 综合案例 Tab 栏切换

需求：鼠标经过不同的选项卡，底部可以显示不同的内容

分析：

主要核心是类的切换，设定一个当前类，可以让当前元素高亮
鼠标经过当前选项卡，先移除其余元素身上的当前类，而只给当前元素添加类
注意，当前类只能有一个

# day02 - Web APIs

# 1. 事件监听（绑定）

# 1.2 案例： 京东点击关闭顶部广告

# 1.3 拓展阅读 - 事件监听版本

# 2. 事件类型

# 2.2 案例：轮播图点击切换

# 2.3 案例： 小米搜索框案例

# 2.4 案例：评论字数统计

# 3. 事件对象

# 3.1 获取事件对象

# 3.2 事件对象常用属性

# 3.2.2 案例：评论回车发布

# 4. 环境对象

# 5. 回调函数

# 6. 综合案例 Tab 栏切换

webAPI05

webAPI03

# 1.2 案例：京东点击关闭顶部广告

# 2.3 案例：小米搜索框案例