Web API学习02

常用的键盘事件：

键盘事件：

注意：

1. 如果使用addEventListener不需要加on
2. onkeypress和前面2个的区别是，它不识别功能键，比如：左右箭头，shift等。
3. 三个事件的执行顺序是：keydown -- keypress --keyup 

键盘事件对象: 

注意：

1. onkeydown和onkeyup 不区分字母大小写，onkeypress区别大小写。
2. 在我们实际开发中，我们更多的使用keydown和keyup，他能识别所有的键，（包括功能键）
3. keypress 不识别功能键，但是keyCode属性能区别大小写，返回不同的ASCII 

BOM：

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

​ BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

​ BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

BOM的构成：

BOM 比 DOM 更大，它包含 DOM。

顶级对象window： 

window对象的常见事件： 

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

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

第二种： 

 

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

​ IE9以上才支持！！！

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

this指向问题：

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。

现阶段，我们先了解一下几个this指向

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

2. 方法调用中谁调用this指向谁

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

location对象：

什么是 location 对象？

URL： 

 

 location对象的常见方法：

navigator对象： 

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

history对象：

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

history对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

JS执行机制：

JS 是单线程：

JavaScript语言的一大特点就是单线程，也就是说，同一时间只能做一件事情，这是因为javascript这门语言诞生使命所致——javascript是为处理页面中用户的交互，以及操作DOM而诞生，比如我们对某个DOM元素进行添加和删除操作，不能同时进行操作，应该先进行添加在删除。

同步任务和异步任务：

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

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

 同步：

​ 前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。

异步：

​ 你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

同步任务指的是： 在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

异步任务指的是：不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行。

JS执行机制（事件循环）：

 

由于主线程不断的重复获得任务，执行任务，再获得任务，再执行，所以这种机制被称为事件循环（event loop） 。

元素偏移量 offset 系列： 

offset 概述：

offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

1. 获得元素距离带有定位父元素的位置

2. 获得元素自身的大小（宽度高度）

3. 注意：返回的数值都不带单位

 

ffset 与 style 区别：

offset：

•  offset 可以得到任意样式表中的样式值
•  offset 系列获得的数值是没有单位的
•  offsetWidth 包含padding+border+width
•  offsetWidth 等属性是只读属性，只能获取不能赋值
• 所以，我们想要获取元素大小位置，用offset更合适

style：

• style 只能得到行内样式表中的样式值
• style.width 获得的是带有单位的字符串
• style.width 获得不包含padding和border 的值
• style.width 是可读写属性，可以获取也可以赋值

所以，我们想要给元素更改值，则需要用style改变。

元素可视区 client 系列：

client概述:client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

 

元素滚动 scroll 系列:

scroll 概述:scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

 

页面被卷去的头部:

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll事件。

三大系列总结: 

 

他们主要用法：

1. offset系列 经常用于获得元素位置    offsetLeft  offsetTop
2. client经常用于获取元素大小  clientWidth clientHeight
3. scroll 经常用于获取滚动距离 scrollTop  scrollLeft  
4. 注意页面滚动的距离通过 window.pageXOffset  获得

mouseenter 和mouseover的区别:

• 当鼠标移动到元素上时就会触发mouseenter 事件
• 类似 mouseover，它们两者之间的差别
• mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter  只会经过自身盒子触发
• 之所以这样，就是因为mouseenter不会冒泡
• 跟mouseenter搭配鼠标离开 mouseleave  同样不会冒泡