day02 - Web APIs

最新推荐文章于 2024-07-25 09:24:40 发布

@-wyy

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量564

点赞数 16

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_73113427/article/details/136388443

版权

学习目标：

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

1. 事件监听（绑定）

什么是事件？
- 用户行为被程序侦测到。
- 比如：用户点击一个按钮。
什么是事件监听？
- 让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应。
- 比如：鼠标经过显示下拉菜单，比如点击可以播放轮播图等等。
j事件监听三要素
- 事件源：哪个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('我按下了回车键')
    }
})
```