1. 键盘事件
注意
如果使用
addEventListener注册事件时不需要为事件加上on。onkeypress和前面两个的区别是他不能识别功能键。比如ctrl shift等等。三个事件的执行顺序是 ：
keydown ->keypress -> keyup。
1.1 键盘事件对象
使用keyCode属性判断当前按下的是哪个键
document.addEventListener('keyup', function (ev) {
// console.log(ev);
// console.log(ev.key); // 有比较大兼容性问题
console.log('up', ev.keyCode); // 有比较大兼容性问题
if (ev.keyCode === 65) {
alert('您按下的是 a');
} else {
alert('您按下的不是 a');
}
});
// 1. keyup 和 keydown 事件不区分字母大小写
document.addEventListener('keydown', function (e) {
console.log('down', e.keyCode);
});
// 2. keypress 事件区分字母大小写
document.addEventListener('keypress', function (e) {
console.log('press', e.keyCode);
})
1.2 案例：模拟输入京东按键输入内容
- 按下s键后将鼠标光标定位到输入框中。
注意：触发输入框获取焦点的方法是 .focus()
let search = document.querySelector('input');
/**
* 当按键抬起的时候将光标定位到input
*/
document.addEventListener('keyup', function (e) {
if (e.keyCode === 83) {
search.focus();
}
});
1.3 案例：模拟京东快递单号查询案例
- 【前端案例】09 - 实时显示文本框输入内容 -
2. BOM 浏览器对象模型
BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
2.1 BOM 和 DOM的区别
BOM
浏览器对象模型；
将浏览器当做一个对象来对待；
BOM的顶级对象是window；
BOM学习的是浏览器窗口交互的一些对象；
BOM是浏览器厂商在各自浏览器上定义的，兼容性比较差。
DOM
文档对象模型；
DOM就是将文档当做一个对象来对待；
DOM的顶级对象是document；
DOM主要学习的是操作页面元素；
DOM是w3c标准规范。
2.2 BOM的构成
- BOM 比 DOM 更大，它包含了DOM；
2.3 顶级对象window
页面窗口加载事件
- 第一种方式：
window.onload = function(){}
或者
window.addEventListener('load',function(){});
window.onload是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
注意
有了
window.onload就可以将JS代码写到页面的元素上方，因为onload是等页面内容全部加载完毕，再执行 处理函数。window.onload传统注册方式，只能写一次，如果注册多次，会以最后一个window.onload为准。如果使用
addEventListener则没有注册次数的限制。
- 第二种方式
/**
* 不用等到图片CSS等加载完就可以
*/
document.addEventListener('DOMContentLoaded', function () {
...
});
DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。IE9以上才支持！！！
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适。
/**
* 使用addEventListener的方式注册事件
*/
window.addEventListener('load', function () {
let btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert('点了我');
});
});
/**
* 不用等到图片CSS等加载完就可以
*/
document.addEventListener('DOMContentLoaded', function () {
let div = document.querySelector('div');
div.innerHTML = '333';
alert(666);
})
调整窗口大小事件
window.onresize = function(){};
window.addEventListener('resize',function(){});
window.onresize是调整窗口大小加载事件, 当触发时就调用的处理函数。
注意
- 只要窗口大小发生像素变化，就会触发这个事件。
- 我们经常利用这个事件完成响应式布局。
window.innerWidth当前屏幕的宽度。
window.addEventListener('load', function () {
window.addEventListener('resize', function () {
console.log('窗口变化了');
let div = document.querySelector('div');
// 屏幕的宽度
let width = window.innerWidth;
// 屏幕的高度
let height = window.innerHeight;
// 当屏幕宽度小于 800 的时候隐藏 div 盒子
if (width < 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
});
});
div {
width: 200px;
height: 200px;
background-color: pink;
}
2.4 定时器（两种）
window对象给我们提供了 2 个非常好用的方法-定时器。
setTimeout()setInterval()
setTimeout() 炸弹定时器
开启定时器：
window.setTimeout(回调函数,[延迟的毫秒数]);
setTimeout 这个函数我们称为回调函数callback
注意
window可以省略；这个函数可以直接写函数，或者写函数名称采用字符串的方式
'函数名()'三种方式。但是第三种方式不推荐;延迟毫秒数省略默认是
0，如果写上，必须是毫秒数;因为定时器可能有很多，所以进行将定时器赋值给一个标识符。
// 1. 第一种写法
setTimeout(function () {
console.log('bang bang');
}, 2000);
// 2. 第二种写法
function callBack() {
console.log('炸了');
}
setTimeout(callBack, 3000);
// 3. 第三种写法
setTimeout('callBack()', 4000);
普通函数是按照代码顺序直接调用。
简单理解： 回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
例如：定时器中的调用函数，事件处理函数，也是回调函数。
以前我们讲的element.onclick = function(){}或者element.addEventListener(“click”, fn);里面的 函数也是回调函数。
案例：5秒后关闭广告
- 【前端案例】10 - 案例：5秒后关闭 ad - (jianshu.com)。
停止定时器
window. clearTineout(定时器名称);
-
clearTimeout方法取消了先前通过调用setTimeout建立的定时器。
注意
window 可以省略。
里面的参数就是定时器的标识符。
let timer = setTimeout(function () {
console.log('爆炸了');
}, 3000);
window.addEventListener('load', function () {
// 获取按钮
let btn = document.querySelector('button');
btn.addEventListener('click', function () {
// 停止定时器
clearTimeout(timer);
});
});
setInterval() 闹钟定时器
开启定时器
window.setInterval(回调函数,[间隔的毫秒数]);
- setInterval() 方法重复调用一个函数，每个这个间隔时间，就会去调用一次回调函数。
// 每隔指定的时间调用一次
setInterval(function () {
console.log('恭喜啊');
}, 1000)
案例：倒计时
- 【前端案例】11 - 案例：倒计时 - (jianshu.com)
停止计时器
window.clearInterval(定时器名称);
-
clearInterval()方法取消了先前调用setInterval()建立的定时器。
let on = document.querySelector('.on');
let off = document.querySelector('.off');
let timer = null; // 设置一个全局变量接收定时器对象
on.addEventListener('click', function () {
// 设置定时器
timer = setInterval(function () {
console.log('走起');
}, 1000);
});
off.addEventListener('click', function () {
clearInterval(timer);
});
2.5 this指向问题
- this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定
this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。
现阶段，我们先了解一下几个this指向
全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）;
方法调用中谁调用this指向谁;
构造函数中this指向构造函数的实例。
let button = document.querySelector('button');
// this 指向问题一般情况下this的最终指向的是那个调用它的对象
// 1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
console.log(this);
function fn() {
console.log(this);
}
fn();
setTimeout(function () {
console.log(this);
}, 1000);
// 2. 方法调用谁调用指向谁
let o = {
sayHello: function () {
console.log(this);
}
};
o.sayHello(); // o
button.addEventListener('click', function () {
console.log(this);
});
// 3. 构造函数中他this指向构造函数的实例
let obj = new Object(); // 这里的 this 指向的是 obj 这个实例
2.6 location对象
什么是location对象
-
window对象给我们提供了一个location对象用于获取或设置窗体URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。
URL
统一资源定位符（Uniform Resource Locator）是互联网上标准资源的地址。互联网上的每一个文件都有一个唯一的URL。因为这个属性返回的是一个对象，所以我们将这个属性也成为了location对象。URL的一般语法 ：
protocol://host[:port]/path/[?query]#fragment
https://www.baidu.com/index.html?name='老王'#锚点
location 对象的属性
重点记住：href 和 search属性。
案例：5秒后跳转页面
- 【前端案例】13 - 案例：5秒后跳转页面 - (jianshu.com)。
案例：获取地址栏的参数
- 补链接。
location对象的常见方法
let btn = document.querySelector('button');
btn.addEventListener('click', function () {
// location.assign('https://www.baidu.com'); // 重定向页面
// location.reload(true); // 强制刷新
location.replace('https://www.baidu.com'); // 不记录历史记录
});
2.7 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 = ""; //电脑
}
2.8 history对象
-
window对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。
3. JS的执行机制 （重点）
3.1 JS是单线程的
-
JavaScript语言最大的特点就是单线程，也就是说，同一时间只能做一件事。这是因为JavaScript这门脚本语言诞生的使命所致，JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行增删操作，不能同时进行。应该先进行添加操作，再进行删除操作。
- 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
- 这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
3.2 同步任务和异步任务
单线程导致的问题就是后面的任务等待前面任务完成，如果前面任务很耗时（比如读取网络数据），后面任务不得不一直等待！！
为了解决这个问题，利用多核
CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制。于是，JS中出现了同步任务和异步任务。
同步
- 前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。
异步
- 你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。
他们的本质区别就是这条流水线上的执行顺序是不一样的。
JS中所有任务可以分成两种，一种是同步任务（
synchronous），另一种是异步任务（asynchronous）;
同步任务指的是：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务指的是：不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行。
3.3 JS执行机制（事件循环）
代码思考
console.log('1');
/**
* 不点击的话不会在任务队列中出现
*/
document.addEventListener('click', function () {
console.log('click');
});
console.log('2');
setTimeout(function () {
console.log('3');
}, 3000);