Web API（四）键盘事件和BOM知识点

Web API（四）键盘事件和BOM知识点

一、常用的键盘事件

1、键盘事件

• 按下任意按键事件：keydown
• 松开任意按键事件：keyup
• 除 Shift、Fn、CapsLock 外的任意键被按住：keypress

2、键盘事件的绑定对象

• 给 整个页面（document） 绑定：在任何位置都可以触发键盘事件
• 给 表单元素（input） 绑定: 只能在输入框中输入文字的时候触发

注意：三个事件执行的顺序是：keydown–keypress–keyup

3、键盘事件对象

每个按键都对应了一个唯一的数字值（ASCII值），通过 事件对象.keyCode 属性值可以获取这个数字值。

​ Enter（回车键）的 keyCode 值 --> 13

注意：keyup 和 keydown 事件中不区分按键的大小写，keypress 区分按键的大小写

4、案例：模拟京东快递单号查询

   <div class="box">
        <input type="text" id="ipt">
        <div class="larger"></div>
    </div>
    <script>
        // 模拟京东快递快递单号查询
        // 功能1 显示和隐藏放大框
        // 功能2：输入框获取焦点的时候显示放大框
        // 功能3：输入框失去焦点的时候隐藏放大框
        // 获取元素
        var ipt = document.querySelector('#ipt');
        var large = document.querySelector('.larger');
        // 输入框获取焦点时，显示放大框
        ipt.addEventListener('focus', function() {
                if (this.value != '') {
                    large.style.display = 'block';
                    // large.innerHTML = this.value;
                }
            })
            // 失去焦点，隐藏放大框
        ipt.addEventListener('blur', function() {
                large.style.display = '';
            })
            // 给输入框绑定键盘输入事件
        ipt.addEventListener('keyup', function() {
            if (this.value != '') {
                large.style.display = 'block';
                large.innerHTML = this.value;
            } else {
                large.style.display = 'none';
            }
        })
    </script>

二、BOM

1、什么是BOM

Browser Object Model 浏览器对象模型, 浏览器厂商给我们提供了操作浏览器的相关API

2、顶级对象window

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lr7cpUQl-1619088721876)(E:\黑马培训\前端基础\案例练习\就业班\笔记\Web API\Web API第四天\images\1551319372909.png)]

• 顶级的全局对象, window 对象下的属性和方法，可以不用加 window. 直接调用
• 全局变量会自动挂载到 window 对象下

3、页面（窗口）加载事件（2种）

文档结构解析完成：DOMContentLoaded (给 document 对象绑定)

文档内容全部加载完成: load (只能给 window 对象绑定)

区别：

DOMContentLoaded： 不包括页面中的外链资源加载时间，比如图片、脚本等（相当于加载骨架，比load加载完成快）

load： 包括页面中的外链资源加载时间，比如图片、脚本等

4、调整窗口大小事件

浏览器窗口大小改变事件(resize 事件)： window.addEventListener(‘resize’, fn)

作用： 帮助我们在响应式页面布局适配

浏览器窗口宽度获取方法：window.innerWidth

5、定时器（两种）

（1）、setTimeout

经过一段延迟时间后自动触发的事件：setTimeout （一次性定时器）

语法：setTimeout(处理函数, 延迟时间)

参数：处理函数可以是一个匿名函数或单独的函数名；延迟时间的单位是 毫秒

setTimeout函数的返回值：返回值是一个计时器的唯一编号(名字)，可以帮助程序找到定义的那个定时器，随时进行终止和销毁

销毁定时器：clearTimeout(timeID)

注意：

• setTimeout 定时器事件一旦注册，就立即开启倒计时
• 延迟时间支持科学技术法 2000 --> 2e3
• setTimeout 定时器中的 this 指向 window 对象

（2）、setInterval（周期性定时器）

每隔一段延迟时间后自动触发的定时器：setInterval（周期性定时器）

语法：window.setInterval(处理函数, 延迟时间)

作用：每隔一段延迟时间，就自动去调用处理函数

返回值和setTimeout意义相同

销毁定时器：clearInterval(timeID)

两者最大区别：setInterval 定时器和 setTimeout 定时器最大的区别，重复执行 和 执行一次

6、this 指向问题

• this 在构造函数中的指向

  ​ 指向构造函数创建的实例对象

• this 在全局作用域中的指向和this 在定时器处理函数中的指向

  ​ 指向全局对象 window

• this 在对象函数方法中的指向

  ​ 指向调用这个函数的对象

• this 在事件处理函数中的指向

  ​ 指向当前事件的绑定者

​ 注意: 函数中的 this 指向它的调用者, 一般只有在调用一个函数的时候才能确定里面的 this 指向

7、javascript 中的同步和异步

（1）javascript 语言的运行特点：

单线程运行，同一时间只能执行一件事，如果有多个任务，就必须要排队执行

同步执行：程序书写的顺序和执行的顺序保持一致

特点：后一个任务会被前一个比较耗时的任务给阻塞，降低效率

异步执行的优点（重点）：后一个任务不需要等到前一个耗时任务执行完成才执行，可以利用前一个任务的等待时间去执行

（2）浏览器是多线程模式

浏览器不是单线程模式，可以创造多线程进行程序处理

（3）异步任务和同步任务执行过程

js 中的异步任务实现方式：通过回调函数 （一个回调函数就是一个异步任务）

常见的异步任务：

​ （1）事件： click、mouseover、keyup

​ （2）定时器： setTimeout、setInterval

​ （3）资源加载: 图片、脚本…

​ （4）网络请求: ajax、http

图示 js 程序如何执行同步任务和异步任务？

核心过程: 必须先执行完成同步任务，再去执行消息队列中的异步任务（回调函数）

（4）事件循环 Event Loop (面试重点)★★★★★

主线程执行栈执行完了同步任务后，会不断地检查任务队列中是否存在异步任务，如果存在就把异步任务添加到主线程栈执行，然后不断循环上述步骤

​ 记忆：先同步后异步，异步顺序看触发

8、loaction

• 作用：操作浏览器地址栏上的 URL

• URL(统一资源定位符) 的基本格式

  ​ protocol://host[:port][/pathname][query][#fragment]

  ​ protocol: file, http, https 协议

  ​ host: 主机 ip 地址以及域名

  ​ port: 端口默认是 80 （可以省略）

  ​ query: 查询参数 ?key=value&key=value

  ​ fragment: 锚点 #abc

• 协议://域名或ip/路径[:端口][?查询参数][#锚点]

• location 对象上的常用属性

  ​ (1) href属性：获取当前 url 或 跳转到某个 url

  ​ (2) search属性： 获取 URL 中的查询参数 ?key=value

  ​ (3) hash属性： 获取 URL 中的锚点 #abc

• location方法

  一、assign 方法的作用（了解）

  ​ 跳转页面，并记录浏览历史，可以后退

  ​ 二、replace 方法的作用(了解)

  ​ 替换当前页，不会记录浏览历史，不可以后退

  ​ 三、reload 方法的作用

  ​ 刷新当前页，传入 true 表示强制刷新（去除缓存） location.reload(true)

9、navigator对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

下面前端代码可以判断用户那个终端打开页面，实现跳转

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }

10、history对象

• 返回上一页的做法

  ​ history.go(-1) 或 history.back()

• 前进下一页的做法

  ​ history.go(1) 或 history.forward()