键盘事件、 BOM和DOM、window、location、navigator、history对象、this指向问题、 JS执行机制（事件循环）

最新推荐文章于 2022-06-16 17:57:53 发布

MoMokolyouo

最新推荐文章于 2022-06-16 17:57:53 发布

阅读量471

点赞数

文章标签：前端 webpack typescript

本文链接：https://blog.csdn.net/qq_43342124/article/details/121452485

版权

1.1. 常用的键盘事件

1.1.1 键盘事件
在这里插入图片描述

三个事件的执行顺序 keydown – keypress – keyup

1.1.2 键盘事件对象
在这里插入图片描述

使用keyCode属性判断用户按下哪个键

注意：触发获得焦点事件，可以使用元素对象.focus() 同理直接调用按钮点击事件
document.querySelector(‘button’).click()

1.2. BOM和DOM
在这里插入图片描述

BOM 比 DOM 更大，它包含 DOM。

在这里插入图片描述

1.2.4. window对象的常见事件

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

第1种
window.onload 是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

第2种

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。

IE9以上才支持！！！

如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。

调整窗口大小事件

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

注意：

只要窗口大小发生像素变化，就会触发这个事件。

我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度

 <script>
     // 注册页面加载事件
     window.addEventListener('load', function() {
         var div = document.querySelector('div');
     	// 注册调整窗口大小事件
         window.addEventListener('resize', function() {
             // window.innerWidth 获取窗口大小
             console.log('变化了');
             if (window.innerWidth <= 800) {
                 div.style.display = 'none';
             } else {
                 div.style.display = 'block';
             }
         })
     })
 </script>
 <div></div>

1.2.5. 定时器（两种）

window 对象给我们提供了 2 个非常好用的方法-定时器。

setTimeout()
setInterval()

setTimeout() 炸弹定时器

开启定时器

在这里插入图片描述

停止定时器
在这里插入图片描述

setInterval() 用法和setTimeout() 相似

1.2.6. this指向问题

全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
方法调用中谁调用this指向谁

构造函数中this指向构造函数的实例

 <button>点击</button>
 <script>
     // this 指向问题 一般情况下this的最终指向的是那个调用它的对象
     // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
     console.log(this);
     function fn() {
         console.log(this);
     }
     window.fn();
     window.setTimeout(function() {
         console.log(this);
     }, 1000);
     // 2. 方法调用中谁调用this指向谁
     var o = {
         sayHi: function() {
             console.log(this); // this指向的是 o 这个对象
         }
     }
     o.sayHi();
     var btn = document.querySelector('button');
     btn.addEventListener('click', function() {
             console.log(this); // 事件处理函数中的this指向的是btn这个按钮对象
         })
     // 3. 构造函数中this指向构造函数的实例
     function Fun() {
         console.log(this); // this 指向的是fun 实例对象
     }
     var fun = new Fun();
 </script>

1.2.7. location对象

location 对象的属性

在这里插入图片描述

location对象的常见方法
在这里插入图片描述

1.2.8. 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 = "";     //电脑
 }

1.2.9 history对象

window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

在这里插入图片描述

1.3. JS执行机制

1.3.1 JS 是单线程

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

1.3.2 同步任务和异步任务

单线程导致的问题就是后面的任务等待前面任务完成，如果前面任务很耗时（比如读取网络数据），后面任务不得不一直等待！！

为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程，但是子线程完全受主线程控制。于是，JS 中出现了同步任务和异步任务。

JS中所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。
同步任务指的是：
在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务指的是：
不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行。

1.3.3 JS执行机制（事件循环）
在这里插入图片描述