一. 网络请求
1.Ajax
异步的使用JS和服务器进行数据交换，在不加载整个页面的情况下对网页的某部分进行数据更新
1.1 创建Ajax
Var ajax = window.XMLHttpRequest ? newXMLHttpRequest() : newActiveXObject(Microsoft.XMLHttp’);
1.2 通过open方法进行一些配置
get/post
get在url后 post在请求头前
get有存储限制 post没有
Get提交非敏感数据和小数据 post提交敏感数据和大数据
url接口请求地址
True/false同步和异步请求
Ajax.open(‘get’, ‘/a.txt?a=1;b=2’,true);
1.3 ajax请求发送
Ajax.send(null);
1.4 监听服务器的返回
Ajax.onreadystatechange = function(){
//onreadystatechange存放ajax状态值
/*
未初始化（调用open之前）
未发送（调用send之前）
已发送（未接收到服务器的返回结果）
开始接受（单位接收完成）
已完成 （接收完毕）
*/
If(ajax.readystate==4){
If(ajax.status >=200 && ajax.status <=300 || ajax.status==304{
Console.log(ajax.responseText);
}else{
Console.log(‘request failed: ‘ + ajax.status);
}
}
}
1.5 ajax与服务器进行通讯
- 本地不允许发ajax请求 协议http或https
- 跨域安全策略 ajax对象只能请求同源（协议，域名，端口相同）的接口地址
2. Json
Var obj = JSON.parse(‘{“a”:”Hello”,”b”:”World”}’); //{a:’Hello’, b:’World’} JSON转为JS对象
Var json = JSON.stringify（{a:’hello’, b:’World’}） //‘{“a”:”Hello”,”b”:”World”}’ JSON对象封装
二 .数据类型
1.基本数据类型
1.1.数值
包括整数和浮点数，以及特殊的NaN和infinity（整数和浮点数在底层都是通过64位浮点数存储的，所以1===1.0）
1.2.字符串
（HTML使用“”，JS一般用‘’区分），可以被视为字符数组返回string【i】，length属性是原始属性无法被改变，使用Unicode，使用btoa()和atob（）转换为base64）
1.3.布尔值 true和false
在转换时（undefinrf，null,false,0,NaN,0,"",''转换为false，其他全为true）
2.合成类型
2.1 对象（数组，函数，以及狭义的对象）
①包括数组，函数，以及狭义的对象
② 对象包括键名和值key-value
③ 使用{}，JS在和代码块混淆时解释为代码块，所以在表示对象是可以加个（）
④使用.和[]读取属性
⑤delete删除属性
⑥in判断属性是否在对象里
⑦for....in循环所有属性包括继承来的
⑧with操作对象的多个属性
2.2 函数
①定义（function命令，函数表达式赋值给变量，构造函数）
②name，legth，toString（）
③函数作用域（全局，函数（变量提升），块级）
④参数（可省略）传递时有值传递不影响原来的值，对象传递，修改内存，原值被修改
由同名参数时取最后的参数
arguments来进行不定数量参数，arguments[0]是第一个参数
⑤闭包，定义私有变量，通过相应的函数内的函数对外传递函数变量
⑥IIFE，函数名之后加（）表示立即调用
⑦eval一般不使用
数组本质是特殊的对象
3.特殊类型
3.1.undefined：表示未定义
3.2.null：表示值为空
PS1：
JS通过typedef（返回number，string，boolean，object（包括数组和null），undefined，function），instanceof（区分数组和对象），object.prototype.toString确定数据类型
Ps2：
JS中有+0和-0
Ps3:
NaN表示非数字
（不等于任何值包括自己NaN!==NaN,不能indexof判断
与任何数的运算都是NaN）
比如0/0，以及其他错误的数学表示
Ps4:indefinty表示无穷（1/0）pow（2.1024）运算符合无穷的定义
Ps5：parseInt()字符串转换为整数（只转换可以转换的前面的部分）,parseFloat（），isNaN（），isFinite（）将infinity，-inFinity，NaN，undefined返回false，其他返回true，nulll返回true
PS6:数组遍历ES5：forEach（function（val，index，arr）{console.log(val,index,arr);})
参考教程地址https://wangdoc.com/javascript/types/index.html
三 .运算符
1.算数运算符
其他没什么好讲的，主要需要注意的就是+
①字符串之间使用+号会连接字符串
②字符串和数字之间使用+会将数字转化为字符串转化为字符串（注意前后顺序）
③对象间使用时要先转换为原始类型的值valueOf（）.toString（）
之后就是++和--注意前后顺序
2.比较运算符
①字符串比较unicode值，按前后顺序比较
②数值，字符串，布尔型的比较转换为数值，比较
③对象比较先转为原始类型，在比较
④===（同一个值）和 ==（不是同一个值转换为同类型在比较===）
3.布尔运算符
①！ && || ？：
4.位运算符
| & ~ ^ << >> <<<
Ps1:void和“，”也是运算符
PS2：运算顺序和左右结合
参考教程https://wangdoc.com/javascript/operators/priority.html
https://wangdoc.com/javascript/features/conversion.html
四 .数据类型转换
1.强制转换
①Number()
字符串：只要有一个字符串没办法转换就会转为NaN
转换对象时只有包含单个数值的数组才可以转换
原理就是调用valueOf返回原始类型直接Number（）如果是返回对象就调用toString（）返回原始类型的值调用Number（），如果toString返回的还是对象就报错
②String（）
对象：返回类型字符串
数组：返回数组的字符串形式
原理是先调用toString() 返回原始类型就调用String
返回对象时调用valueOf，返回原始类型时使用String
返回对象哪个是报错
③Boolean（）
除了false，null,undefined 0 ‘’
其他全转换为true
2.自动转换
①不同数据类型相互运算
②对非布尔类型求布尔值
③非数值类型求一元运算符
五 .错误处理机制Error
构造Error函数创建实例对象赋给一个对象
①属性：里面包含message， name， stack
②原生类型 SyntaxError ReferenceError RangerError TypeError URIError EvalError
③自定义类型
④ throe try catch Finally
六.Console
①log（info）
②debug
③warn error
④table
⑤count
⑥timr timeEnd
⑦ debugger
https://wangdoc.com/javascript/stdlib/attributes.html
七.标准库
1.Object对象
①本身方法和实例方法Object.prototype
②Object（）转换为对象，原始类型转换为包装类
③构造方法new和={}
④静态方法keys和getOwnPropertyNames,返回数组遍历属性，前者只能返回可枚举属性，后者可以返回不可枚举
2.属性描述对象
①原属性 value,writable,enumerable,configurable,get,set
②getOwnPropertyDescriptor 获取属性描述对象
③getOwnPropertyNames 获取对象所有属性名
④definePorperty（对象，属性名，属性描述对象）
⑤prototype.peopertyIsEnumeraable，某个属性是否可遍历
⑥存取器，定义之后执行相应操作会执行
⑦preventExtensions无法添加新属性 isExtensible检查是否执行该方法（seal使得无法添加也无法删除，isSealed判断，freeze无法删除无法添加无法修改，isFrozen判断）
3.Array
①方法：isArray，valueOf，toString，push，pop（先进后出），shift，unshift，join，concat，reverse，slice，splice（start，count，add1...），sort（按字典排序），map所有成员依次传入函数返回新数组不改变原数组，forEach，filter过滤不改变原数组，some，every返回满足条件的程度，reduce，reduceRight依次处理，indexOf，lastIndexOf，这些方法可以链式使用
4.包装对象
①Boolean （转换为对象和转换工具）双重否定转为true，但不改变转为false的五种类型（特殊值加new“包装对象”和不加new结果“转换为boolean”不同）
②Number 实例函数toFixed转换为指定位数的小数 toExponential转为科学计数法，toPrecision指定位数的有效数字
③String 静态方法 fromCharCode（返回unicode字符串），charAt，charCodeAt，concat，slice（start，end）,substring(不建议，会修改值），substr（start,count），indexOf，lastIndexOf，trim去空格，toLowerCase，toUpperCase，match匹配，search，replace，split，localCompare
5.Math
①属性，PI，E，LN2，
②方法abs绝对值，max，min，ceil向上取整，floor，pow指数，sqrt平方，exp E指数，round四舍五入，rondam随机数[0,1)
6.Date
静态方法 now，parse， UTC
实例方法 to get set
7.RegExp
g-globe i-ignoreCase m-muline
①属性
②方法 test返回boolean exec返回字符串
Match search replace splite
③字面量he原字符 （.）所有 （^）开始 （$）结束 （|）选择 (/）转义字符 （[]）字符类（^ -）, （{}）重复类
8.Json
规范：
复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。
原始类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN, Infinity, -Infinity和undefined）。
字符串必须使用双引号表示，不能使用单引号。
对象的键名必须放在双引号里面。
数组或对象最后一个成员的后面，不能加逗号。
①stringify 字符串转为“/”...“/”
第二个参数类似于白名单只对对象属性起作用 函数修改返回值
第三个参数增强可读性
②parse
https://wangdoc.com/javascript/oop/new.html
八.面向对象编程
1 .构造
①构造对象 第一个字符大写 内部有this 生成对象使用new
New：
创建一个空对象，作为将要返回的对象实例。
将这个空对象的原型，指向构造函数的prototype属性。
将这个空对象赋值给函数内部的this关键字。
开始执行构造函数内部的代码。
②创建对象 Object.create
2.This
①表示当前属性所在的对象，全局环境使用this就是顶层对象windows，构造函数的this是实例对象，方法内的对象指方法运行时所在的环境
②不要使用多层this
③避免数组处理方法中的this
④避免回调函数中使用this
⑤绑定this call，apply，bind
3.对象的继承
①js里面没有类的概念（但在ES6里面出来了，之后放在ES6的学习中讲）继承一般指继承构造函数原型对象的内容，在里面定义所有实例对象共享的属性和方法
②原型链 尽头是null 在对象里自己定义和原型同名的属性和方法，覆盖overriding
③constructor 得知某个实例对象是哪个构造函数产生
④instanceof 返回booolean，对象是否为某个构造函数的实例
⑤构造函数的继承 子类的构造函数调用父类的构造函数，Super.call（this） 子类的原型指向父类的原型Sub.prototObject.create(Super.prototype) Sub.prototype.constructor=Sub Sub.prototype.method=’...’
4.Object相关方法
①getPrototypeOf 返回参数对象的原型
②setPrototypeOf 参数对象设置原型
③create
④isPrototypeOf是否为参数对象的原型
⑤_proto_对象的原型
⑥getOwnProtyNames 参数对象本身所有属性的键名
⑦hasOwnProperty 判断某个属性定义在对象自身还是在原型链上
⑧in区分是否有某个属性
丘拷贝 相同的原型，相同的实例属性
https://wangdoc.com/javascript/async/general.html
九.异步操作
1.回调函数
2.监听
3.发布订阅
4.流程控制
5.定时器
①setTimeout隔一段时间执行
SetTimeout（function（a,b）{
Consoel.log(a+b）;
},1000,1,1);
事件代码放在下一轮时间循环查询是否到事件
②setInterval每隔一段时间执行
③可以调整时间的顺序，可以将已定义事件放在默认事件之后触发
https://wangdoc.com/javascript/dom/general.html
十 .DOM
1.节点Node
①类型
Document 顶层节点
DocumentType doctype标签 <!DOCTYPE html>
Element HTML标签 <bodu>
Attribute 网页元素的属性 class=”right”
Text 标签文本
Comment 注释
DocumentFragment 文档的片段
②属性
nodeType 整数值 类型值
文档节点（document）：9，对应常量Node.DOCUMENT_NODE
元素节点（element）：1，对应常量Node.ELEMENT_NODE
属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE
文本节点（text）：3，对应常量Node.TEXT_NODE
文档片断节点（DocumentFragment）：11，对应常量Node.DOCUMENT_FRAGMENT_NODE
文档类型节点（DocumentType）：10，对应常量Node.DOCUMENT_TYPE_NODE
注释节点（Comment）：8，对应常量Node.COMMENT_NODE
nodeName：名字
文档节点（document）：#document
元素节点（element）：大写的标签名
属性节点（attr）：属性的名称
文本节点（text）：#text
文档片断节点（DocumentFragment）：#document-fragment
文档类型节点（DocumentType）：文档的类型
注释节点（Comment）：#comment
nodeValue
文本节点（text）、注释节点（comment）和属性节点（attr）有文本值
textContent
当前节点和它的所有后代节点的文本内容
baseURL
字符串 当前网页的绝对路径
ownerDocument
当前节点的顶层文档对象
nextSibLing
当前节点后的第一个同级节点
previousSibling
节点的第一个同级节点
parentNode
父节点
parentElement
父元素节点
firstChild lastChild
childNodes
isConnected
是否在文档中
方法
appendChild
hasChildNodes
cloneNode
注意修改id和name
insertBefore
将某结点插入到父节点内部指定位置
RemoveChild
ReplaceChild（new，old）
Contains
参数节点为当前节点。
参数节点为当前节点的子节点。
参数节点为当前节点的后代节点。
isEqualNode isSameNode
Normalize
清理节点内部所有文本节点
getRootNode
①NodeList接口
Document.querySelectorAll(0
Length
forEach item keys values entries
②HTMLCollection接口
Length
Item nameItem
③ParentNode接口
属性:Children 返回HTMLCollection实例（元素节点） firstElementChild lastElementCount
方法： apped()后面 prepend前面 元素节点和文本节点
④ChildNode接口
方法remove before前插入 after后插入 replaceWith
2.Document节点
属性
defaultviewdocument所属的Window对象 doctype <!DOCTYPe hteml>
documentElement root
Body 指向<BODY>节点 head指向<head>
scrollingElement 标准: 根元素 兼容：body Null
activeElement 焦点DOM元素
fullscreenElement 全屏DOM元素 NULL
Links 当前文档设定的href属性的<a> <area>
Scrippts 所有的scropt节点
styleSheets 内嵌或引入的样式表集合
documentURI URL 字符串返回当前文档网址
Domain 域名
Location 原生对象
lastModidied 最后修改时间
Title <Title>的值
characterSet 文档编码
Referrer 文档访问者来自哪里
Dir 文字方向
compatMode 处理文档模式
Hidden 是否可见
visibilityState 可见状态
readyState 当前文档状态
Cookie
designMode 是否可编辑
Implementation 对象
方法
Open 清除所有内容 处于可写状态 closse
Write writeln
querySelector querySelectoraAll
getElemtsByClassName//////
elementFromPoint
createPoint
crreateElement
createTextnode
createAttribute
createComment
createEvent
addEventListener remove dispatchEvent
hasFcus’
adoptNode importNode
createNodeIterator
createTreeWalker
execCommand
3.Element节点
属性
id tagName dir accessKey dragable lang tableIndex title
hidden可读性与CSS独立 contenteditable isContentEditable
Attributes className classlist dataset
innrHTML outerHTML
clientHeigjt clientWidth
clientLeft clientTop
scrollHeight scrollWidth scrollLeft scrollTop
offsetParent offsetHeight offsetWidth offsetLeft offsetTop
Style children childElentolleCount firstElementChild lastElementChild
nextElementSibling previousElementSibling
方法
GetAttribute getAttributeNames setAttribute hasAttribute hasAttributes removeAttribute
querySelector
3.属性操作
Element.attributes 类似数组的动态对象，元素标签的所有属性首节点 Name nameNode
标准属性 标准中定义，自动成为属性
方法 getAttribute getAttributeNames setAttribute hasAttributes removeAttribute
Dataset 方法 appendData deleteData insertData replaceData subStringData
DocumentFragment
Dom树形结构 没有父节点 可插入任意数量的子节点 不属于当前文档
插入当前文档是插入里面的内容而不是它本身，插入完成之后清空需要cloneNode
4.CSS操作
Style CSSStyleDeclaration 操作元素
属性 cssText length parentRule getPropertyPriority geetPropertyValue item removeProperty setProperty
模块侦测
对象 escape supports支持CSS语句 getComputedStyle CSS伪元素
StyleSheet 属性 disabled禁用与否 href media title type parentSheet overNode cssRules ownerRule insertRule deleteRule
5.Mutation Observer Api
Var observer = new MutationObserver(callback);
方法 observe（观察对象，观察类型） 启动监听
Disconnect停止观察 takeRecords 清除变动记录
十一 .事件
1.EventTarget
方法
adddEventListener（type：事件名称 ， listener监听函数或有handleEvent方法的对象 useCapture 是否在捕获阶段或属性配置对象【true捕获，false冒泡】） 绑定事件的监听函数
RemoveEventListener（type：事件名称 ， listener监听函数或有handleEvent方法的对象 useCapture 是否在捕获阶段或属性配置对象） 移除监听函数
dispatcEvent（Event对象） 触发事件
2.事件模型
监听函数
HTML（ onclick， onroad）冒泡阶段触发
元素节点的事件属性 冒泡阶段
addEventListener
This指向
触发事件的元素节点
事件流
冒泡：div-> body -> html -> document
捕获: document-> html ->body -> div
DOM: 事件捕获 -> 当前目标 -> 事件冒泡
事件代理
把子节点的监听函数定义在父节点
3.Event对象
事件发生后产生Event对象
Event本身就是构造函数 event = new Event（type, options）;
属性
Bubbles 是否会冒泡 eventPhase 事件所处阶段
Cancelable 是否可以取消cancekBubble设为true相当于执行stopPropagtion defaultPrevented 是否调用过preventDefault
currentTarget 返回当前事件所处的节点
Target返回原始触发节点
Type事件类型
timeStamp 事件发生时间
isTrusted 事件是否由真实用户行为产生
Detail UI事件才有
方法
parventDefault取消当前事件的默认行为
stopPropagation 阻止事件在DOM中继续传播
stopImmediateProgation 阻止同一事件的其他监听函数被调用
comosedPath数组 最底层节点和依次经过的上层节点
4.鼠标
Mousedown 按下鼠标键触发
Mouseup 释放按下的鼠标键触发
Click 按下鼠标建触发 （mousedown->mouseup->click）
Dbclick 同一个元素上双击鼠标时出发（mousedown->mouseup->click->dbclick）
Mouseenter 进入一个节点时触发
Mousemove 节点内部移动时触发，持续移动持续触发
Mouseleave 离开一个节点时触发，离开父节点不
Mouseout 离开一个节点触发，离开父节点触发
Mousewheel 滚轮
MoveMent
screenX：数值，鼠标相对于屏幕的水平位置（单位像素），默认值为0，设置该属性不会移动鼠标。
screenY：数值，鼠标相对于屏幕的垂直位置（单位像素），其他与screenX相同。
clientX：数值，鼠标相对于程序窗口的水平位置（单位像素），默认值为0，设置该属性不会移动鼠标。
clientY：数值，鼠标相对于程序窗口的垂直位置（单位像素），其他与clientX相同。
movementX 返回与上一个mousemove事件的水平距离
movementY 与上一个mousement事件的垂直距离
OffsetX 鼠标位置与目标节点的padding边缘的水平距离
OffsetY 与目标节点上方的padding的垂直距离
pageX 与文档左侧边缘的距离
pageY 与文档上侧边缘的距离
ctrlKey：布尔值，是否同时按下了 Ctrl 键，默认值为false。
shiftKey：布尔值，是否同时按下了 Shift 键，默认值为false。
altKey：布尔值，是否同时按下 Alt 键，默认值为false。
metaKey：布尔值，是否同时按下 Meta 键，默认值为false。
button：数值，表示按下了哪一个鼠标按键，默认值为0，表示按下主键（通常是鼠标的左键）或者当前事件没有定义这个属性；1表示按下辅助键（通常是鼠标的中间键），2表示按下次要键（通常是鼠标的右键）。
buttons：数值，表示按下了鼠标的哪些键，是一个三个比特位的二进制值，默认为0（没有按下任何键）。1（二进制001）表示按下主键（通常是左键），2（二进制010）表示按下次要键（通常是右键），4（二进制100）表示按下辅助键（通常是中间键）。因此，如果返回3（二进制011）就表示同时按下了左键和右键。
relatedTarget：节点对象，表示事件的相关节点，默认为null。mouseenter和mouseover事件时，表示鼠标刚刚离开的那个元素节点；mouseout和mouseleave事件时，表示鼠标正在进入的那个元素节点。
WheelEvent
鼠标轮滚动
deltaX：数值，表示滚轮的水平滚动量，默认值是 0.0。
deltaY：数值，表示滚轮的垂直滚动量，默认值是 0.0。
deltaZ：数值，表示滚轮的 Z 轴滚动量，默认值是 0.0。
deltaMode：数值，表示相关的滚动事件的单位，适用于上面三个属性。0表示滚动单位为像素，1表示单位为行，2表示单位为页，默认为0。
5.键盘事件
keydown 按下键盘 keypress 按下有值的键 keyup松开键盘
事件
keyboardEvent
KeyboardEvent.altKey：是否按下 Alt 键
KeyboardEvent.ctrlKey：是否按下 Ctrl 键
KeyboardEvent.metaKey：是否按下 meta 键（Mac 系统是一个四瓣的小花，Windows 系统是 windows 键）
KeyboardEvent.shiftKey：是否按下 Shift 键
KeyboardEvent.code属性返回一个字符串，表示当前按下的键的字符串形式。该属性只读。
KeyboardEvent.key属性返回一个字符串，表示按下的键名
KeyboardEvent.location属性返回一个整数，表示按下的键处在键盘的哪一个区域
Repat 键是否被按着不放
方法
KeyboardEvent.getModifierState()方法返回一个布尔值，表示是否按下或激活指定的功能键
6进度事件
ProgressEvent
abort：外部资源中止加载时（比如用户取消）触发。如果发生错误导致中止，不会触发该事件。
error：由于错误导致外部资源无法加载时触发。
load：外部资源加载成功时触发。
loadstart：外部资源开始加载时触发。
loadend：外部资源停止加载时触发，发生顺序排在error、abort、load等事件的后面。
progress：外部资源加载过程中不断触发。
timeout：加载超时时触发。
7.表单事件
Input InputEvent <input> <select> <teextarea>变化时触发
InputEvent.data 字符串表示变动内容
inputType 字符串发生变更的类型
dataTransfer 文本框接受拖拽和复制
Sleect <input> <textarea>选中文本时触发
Change <input> <select> <teextarea>变化时触发，不会连续触发，结束时触发
Invalid 提交表单时不满足校验条件
Reset submit <from>
8.触摸事件
种类
touchstart：用户开始触摸时触发，它的target属性返回发生触摸的元素节点。
touchend：用户不再接触触摸屏时（或者移出屏幕边缘时）触发，它的target属性与touchstart事件一致的，就是开始触摸时所在的元素节点。它的changedTouches属性返回一个TouchList实例，包含所有不再触摸的触摸点（即Touch实例对象）。
touchmove：用户移动触摸点时触发，它的target属性与touchstart事件一致。如果触摸的半径、角度、力度发生变化，也会触发该事件。
touchcancel：触摸点取消时触发，比如在触摸区域跳出一个模态窗口（modal window）、触摸点离开了文档区域（进入浏览器菜单栏）、用户的触摸点太多，超过了支持的上限（自动取消早先的触摸点）。
Touch 一个触摸点
identifier：必需，类型为整数，表示触摸点的唯一 ID。
target：必需，类型为元素节点，表示触摸点开始时所在的网页元素。
clientX：可选，类型为数值，表示触摸点相对于浏览器窗口左上角的水平距离，默认为0。
clientY：可选，类型为数值，表示触摸点相对于浏览器窗口左上角的垂直距离，默认为0。
screenX：可选，类型为数值，表示触摸点相对于屏幕左上角的水平距离，默认为0。
screenY：可选，类型为数值，表示触摸点相对于屏幕左上角的垂直距离，默认为0。
pageX：可选，类型为数值，表示触摸点相对于网页左上角的水平位置（即包括页面的滚动距离），默认为0。
pageY：可选，类型为数值，表示触摸点相对于网页左上角的垂直位置（即包括页面的滚动距离），默认为0。
radiusX：可选，类型为数值，表示触摸点周围受到影响的椭圆范围的 X 轴半径，默认为0。
radiusY：可选：类型为数值，表示触摸点周围受到影响的椭圆范围的 Y 轴半径，默认为0。
rotationAngle：可选，类型为数值，表示触摸区域的椭圆的旋转角度，单位为度数，在0到90度之间，默认值为0。
force：可选，类型为数值，范围在0到1之间，表示触摸压力。0代表没有压力，1代表硬件所能识别的最大压力，默认为0。
TouchList 多个触摸点
TouchList.length：数值，表示成员数量（即触摸点的数量）。
TouchList.item()：返回指定位置的成员，它的参数是该成员的位置编号（从零开始）
TouchEvent 触摸引发的实例
ouches：TouchList实例，代表所有的当前处于活跃状态的触摸点，默认值是一个空数组[]。
targetTouches：TouchList实例，代表所有处在触摸的目标元素节点内部、且仍然处于活动状态的触摸点，默认值是一个空数组[]。
changedTouches：TouchList实例，代表本次触摸事件的相关触摸点，默认值是一个空数组[]。
ctrlKey：布尔值，表示 Ctrl 键是否同时按下，默认值为false。
shiftKey：布尔值，表示 Shift 键是否同时按下，默认值为false。
altKey：布尔值，表示 Alt 键是否同时按下，默认值为false。
metaKey：布尔值，表示 Meta 键（或 Windows 键）是否同时按下，默认值为false。
9.拖拽事件
drag：拖拉过程中，在被拖拉的节点上持续触发（相隔几百毫秒）。
dragstart：用户开始拖拉时，在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。通常应该在这个事件的监听函数中，指定拖拉的数据。
dragend：拖拉结束时（释放鼠标键或按下 ESC 键）在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。它与dragstart事件，在同一个节点上触发。不管拖拉是否跨窗口，或者中途被取消，dragend事件总是会触发的。
dragenter：拖拉进入当前节点时，在当前节点上触发一次，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下（drop）拖拉的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拉进入当前节点，也是在这个事件的监听函数中设置。
dragover：拖拉到当前节点上方时，在当前节点上持续触发（相隔几百毫秒），该事件的target属性是当前节点。该事件与dragenter事件的区别是，dragenter事件在进入该节点时触发，然后只要没有离开这个节点，dragover事件会持续触发。
dragleave：拖拉操作离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。如果要在视觉上显示拖拉离开操作当前节点，就在这个事件的监听函数中设置。
drop：被拖拉的节点或选中的文本，释放到目标节点时，在目标节点上触发。注意，如果当前节点不允许drop，即使在该节点上方松开鼠标键，也不会触发该事件。如果用户按下 ESC 键，取消这个操作，也不会触发该事件。该事件的监听函数负责取出拖拉数据，并进行相关处理。
DataTransfer接口
属性
dropEffect 放下被拖节点
target.addEventListener('dragover', function (e) {
e.preventDefault();
e.stopPropagation();
e.dataTransfer.dropEffect = 'copy';
});
effectAllowed本次拖拽中允许的效果
Files FileList对象
Types 只读数组，每个成员是一个字符串
Items
方法
setData 设置拖拉事件所带的数据
getData
clearData
setDragImage
10.其它
资源事件 beforeunload unload load error
Session pageshow pagehide popstate hashchange
网页状态事件 DOMContentLoaded readystatechange
UI事件 load, resize scroll fullscreenchange fullscreenerror
粘贴板事件 cut copy paste
焦点事件 blur获得焦点 focus失去焦点 focusin将获得焦点 focusout将失去焦点
CustomEvent接口 生成自定义事件
十二.浏览器模型
1.概述
1.1.代码嵌入网页
<script>直接嵌入
<script>标签加载外部脚本
时间属性
URL协议
1.2.网页加载流程
浏览器一边下载 HTML 网页，一边开始解析。也就是说，不等到下载完，就开始解析。
解析过程中，浏览器发现<script>元素，就暂停解析，把网页渲染的控制权转交给 JavaScript 引擎。
如果<script>元素引用了外部脚本，就下载该脚本再执行，否则就直接执行代码。
JavaScript 引擎执行完毕，控制权交还渲染引擎，恢复往下解析 HTML 网页。
1.3.使用defer属性
浏览器开始解析 HTML 网页。
解析过程中，发现带有defer属性的<script>元素。
浏览器继续往下解析 HTML 网页，同时并行下载<script>元素加载的外部脚本。
浏览器完成解析 HTML 网页，此时再回过头执行已经下载完成的脚本。
1.4.使用async
浏览器开始解析 HTML 网页。
解析过程中，发现带有async属性的script标签。
浏览器继续往下解析 HTML 网页，同时并行下载<script>标签中的外部脚本。
脚本下载完成，浏览器暂停解析 HTML 网页，开始执行下载的脚本。
脚本执行完毕，浏览器恢复解析 HTML 网页。
脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定
浏览器有渲染引擎和JS解释器
1.5.渲染引擎
解析代码：HTML 代码解析为 DOM，CSS 代码解析为 CSSOM（CSS Object Model）。
对象合成：将 DOM 和 CSSOM 合成一棵渲染树（render tree）。
布局：计算出渲染树的布局（layout）。
绘制：将渲染树绘制到屏幕。
1.6.重流和重绘优化（重流会重绘，重回不一定重流）
读取 DOM 或者写入 DOM，尽量写在一起，不要混杂。不要读取一个 DOM 节点，然后立刻写入，接着再读取一个 DOM 节点。
缓存 DOM 信息。
不要一项一项地改变样式，而是使用 CSS class 一次性改变样式。
使用documentFragment操作 DOM
动画使用absolute定位或fixed定位，这样可以减少对其他元素的影响。
只在必要时才显示隐藏元素。
使用window.requestAnimationFrame()，因为它可以把代码推迟到下一次重流时执行，而不是立即要求页面重流。
使用虚拟 DOM（virtual DOM）库。
1.7.JS引擎
解释器 优化->一定程度的编译
2.Window
浏览器窗口，当前页面的顶层对象
属性
Name
Closes 当前窗口是否关闭 opener 打开当前窗口的父窗口
Self window窗口本身
Frames 页面内所有框架窗口 length框架总数
Frameelement 当前窗口嵌在另一个页面 返回当前窗口元素节点
Top 指向顶层窗口 parent 父窗口
Status 读写浏览器状态栏的文本
devicePixelRatio CSS像素和物理像素的比值
window.screenX和window.screenY属性，返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离（单位像素）。这两个属性只读。
window.innerHeight和window.innerWidth属性，返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport）的大小（单位像素）。这两个属性只读。
window.outerHeight和window.outerWidth属性返回浏览器窗口的高度和宽度，包括浏览器菜单和边框（单位像素）。这两个属性只读。
window.scrollX属性返回页面的水平滚动距离，window.scrollY属性返回页面的垂直滚动距离，单位都为像素。这两个属性只读。
window.pageXOffset属性和window.pageYOffset属性，是window.scrollX和window.scrollY别名
window.locationbar：地址栏对象
window.menubar：菜单栏对象
window.scrollbars：窗口的滚动条对象
window.toolbar：工具栏对象
window.statusbar：状态栏对象
window.personalbar：用户安装的个人工具栏对象
window.document：指向document对象，详见《document 对象》一章。注意，这个属性有同源限制。只有来自同源的脚本才能读取这个属性。
window.location：指向Location对象，用于获取当前窗口的 URL 信息。它等同于document.location属性，详见《Location 对象》一章。
window.navigator：指向Navigator对象，用于获取环境信息，详见《Navigator 对象》一章。
window.history：指向History对象，表示浏览器的浏览历史，详见《History 对象》一章。
window.localStorage：指向本地储存的 localStorage 数据，详见《Storage 接口》一章。
window.sessionStorage：指向本地储存的 sessionStorage 数据，详见《Storage 接口》一章。
window.console：指向console对象，用于操作控制台，详见《console 对象》一章。
window.screen：指向Screen对象，表示屏幕信息，详见《Screen 对象》一章。
window.isSecureContext
window.isSecureContext属性返回一个布尔值，表示当前窗口是否处在加密环境。如果是 HTTPS 协议，就是true，否则就是false。
方法
Alert弹出框 prompt 弹出框加输入框及默认值confirm 弹出框确认，取消
Open （url，windowname，[windowFeatures]）新建窗口 close关闭当前窗口 stop停止加载
moveTo 绝对位置 moveBy 相对位置
resizeTo 缩放到指定绝对大小resizeBy相对
scrollTO 指定位置 scroll scrollBy
Print 跳出打印对话框
Focus（） 激活窗口获得焦点出现在其他窗口前面 blur 焦点从窗口移除
getSelection
window.getComputedStyle()，
window.matchMedia()
window.getComputedStyle()
window.matchMedia()方法用来检查 CSS 的mediaQuery语句，详见《CSS 操作》一章。
window.requestAnimationFrame() 推迟函数执行
requestldleCallback 推迟执行
事件
Load onload error onerror
多窗口
Top顶层窗口 parent父窗口 self当前窗口
Iframe
Frames
3.Navigator Screen
属性
navigator.userAgent属性返回浏览器的 User Agent 字符串，表示浏览器的厂商和版本信息
Navigator.plugins属性返回一个类似数组的对象，成员是 Plugin 实例对象，表示浏览器安装的插件，比如 Flash、ActiveX 等。
Navigator.platform属性返回用户的操作系统信息
navigator.onLine属性返回一个布尔值，表示用户当前在线还是离线
Navigator.language属性返回一个字符串，表示浏览器的首选语言
Navigator.geolocation属性返回一个 Geolocation 对象，包含用户地理位置的信息HTTPS
Navigator.cookieEnabled属性返回一个布尔值，表示浏览器的 Cookie 功能是否打开
方法
javaEnables 能否运行java Appt小程序
sendReacon 向服务器异步发送数据
Screen对象
Screen.height：浏览器窗口所在的屏幕的高度（单位像素）。除非调整显示器的分辨率，否则这个值可以看作常量，不会发生变化。显示器的分辨率与浏览器设置无关，缩放网页并不会改变分辨率。
Screen.width：浏览器窗口所在的屏幕的宽度（单位像素）。
Screen.availHeight：浏览器窗口可用的屏幕高度（单位像素）。因为部分空间可能不可用，比如系统的任务栏或者 Mac 系统屏幕底部的 Dock 区，这个属性等于height减去那些被系统组件的高度。
Screen.availWidth：浏览器窗口可用的屏幕宽度（单位像素）。
Screen.pixelDepth：整数，表示屏幕的色彩位数，比如24表示屏幕提供24位色彩。
Screen.colorDepth：Screen.pixelDepth的别名。严格地说，colorDepth 表示应用程序的颜色深度，pixelDepth 表示屏幕的颜色深度，绝大多数情况下，它们都是同一件事。
Screen.orientation：返回一个对象，表示屏幕的方向。该对象的type属性是一个字符串，表示屏幕的具体方向，landscape-primary表示横放，landscape-secondary表示颠倒的横放，portrait-primary表示竖放，portrait-secondary
4.Cookie
Cookie由http生成 HTTP头信息放set-cookie：name=vlaue
浏览器向服务器发送HTTP求时要带上相应的cookie
属性 Expirs到期时间, Max-Age 指定从现在开始cookis存在的秒数
Domain 浏览器fashuHTTp哪些域名要附带Cookie Path 指定浏览器发出HTTP请求时，哪些路径要附带Cookie
Secure 加密HTTPS才能将cookie发送到服务器 HTTPOnly cookie无法通过JS脚本拿到
Document.cookie用于读写当前网页的cookie
Docuent.cookie读写当前网页cookie
5.HTTPXMLRequest
Ajax 创建XMLHttpRequest实例 发出HTTP请求 接受服务器除安徽的数据 更新网页数据
XMLHttpRequest属性
ReadyState
Onreadystatechange 指向监听函数
Response 服务器返回的数据体respoType Responsetext responseXML responseURL
Status statusText
200, OK，访问正常
301, Moved Permanently，永久移动
302, Moved temporarily，暂时移动
304, Not Modified，未修改
307, Temporary Redirect，暂时重定向
401, Unauthorized，未授权
403, Forbidden，禁止访问
404, Not Found，未发现指定网址
500, Internal Server Error，服务器发生错误
Timeout
事件监听属性
XMLHttpRequest.onloadstart：loadstart 事件（HTTP 请求发出）的监听函数
XMLHttpRequest.onprogress：progress事件（正在发送和加载数据）的监听函数
XMLHttpRequest.onabort：abort 事件（请求中止，比如用户调用了abort()方法）的监听函数
XMLHttpRequest.onerror：error 事件（请求失败）的监听函数
XMLHttpRequest.onload：load 事件（请求成功完成）的监听函数
XMLHttpRequest.ontimeout：timeout 事件（用户指定的时限超过了，请求还未完成）的监听函数
XMLHttpRequest.onloadend：loadend 事件（请求完成，不管成功或失败）的监听函数
WithCredentialls 跨域信息中是否包含用户信息
Upload 发送文件
方法
Open() 指定HTTP请求的参数
Send 发出请求
不带参数，就表示 HTTP 请求只有一个 URL，没有数据体，典型例子就是 GET 请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是 POST 请求
setRequestHeader
overrideMineType
getResponseHeader
getAllResponseHeaders
Abort 终止发出的HTTP请求
事件
readyStateChange
Progress
Load error abort
Loadend
Timeout
Window.postMessage跨窗口通信
十三.跨域
跨域产生的原因，是因为受到同源策略的限制。同源策略指的是协议、域名、端口不相同。这里我将介绍三种跨域的方式：JSONP、CORS(跨域资源共享)、document.domain + iframe。
1.JSONP
1.1. 原理
动态插入script标签（因为script标签不受同源策略的限制），通过插入script标签引入一个js文件，这个js文件加载成功之后会执行我们在url中指定的回调函数，并且会把我们需要的json数据作为参数传入。
1.2. 实现
（1）原生实现：
var script = document.createElement('script');
script.type = 'text/javascript';
// 传参并指定回调执行函数为onBack
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);
// 回调函数
function onBack(res) {
alert(JSON.stringify(res));
}
//服务端返回如下（返回时即执行全局函数）：
onBack({"status": true, "user": "admin"})
（2）jquery ajax：
$.ajax({
url: 'http://www.domain2.com:8080/login',
type: 'get',
dataType: 'jsonp', // 请求方式为jsonp
jsonpCallback: "onBack", // 自定义回调函数名
data: {}
});
2 CORS
2.1. 原理
服务器在响应头中设置相应的选项，浏览器如果支持这种方法的话就会将这种跨站资源请求视为合法，进而获取资源。
2.2. 实现
CORS分为简单请求和复杂请求，简单请求指的是：
（1）请求方法是以下三种方法之一：HEAD、GET、POST；
（2）HTTP的头信息不超出以下几种字段：
Accept、Accept-Language、Content-Language、Last-Event-ID、
Content-Type（只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain）。
其他情况就是非简单请求了。
2.2.1简单请求
（1）请求头：
Origin: http://www.domain.com
（2）响应头：
Access-Control-Allow-Origin: http://www.domain.com
Access-Control-Allow-Credentials: true `是否允许传送cookie`
Access-Control-Expose-Headers: FooBar `CORS请求时，只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须指定。`
（3）另外，ajax请求中,如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名，还要设置以下内容：
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
2.2.2 非简单请求
（1）预检请求:
OPTIONS /cors HTTP/1.1 `OPTIONS请求是用来询问的`
Origin: http://www.domian.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
（2）响应头：
Access-Control-Allow-Origin: http://www.domain.com
Access-Control-Allow-Methods: GET, POST, PUT `服务器支持的所有跨域请求的方法`
Access-Control-Allow-Headers: X-Custom-Header `服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。`
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000 `指定本次预检请求的有效期，单位为秒`
（3）之后的步骤就同简单请求了。
这是CORS的整个流程图：
2.3与JSOP的比较：
JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
3. document.domain + iframe
此方案仅限主域相同，子域不同的跨域应用场景。
3.1.原理
两个页面都通过js强制设置document.domain为基础主域，就实现了同域。
3.2.实现
（1）父窗口：(www.domain.com/a.html)
<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
document.domain = 'domain.com';
var user = 'admin';
</script>
（2）子窗口：(child.domain.com/b.html)
<script>
document.domain = 'domain.com';
// 获取父窗口中变量
alert('get js data from parent ---> ' + window.parent.user);
</script>
这是看几个学习视频的时候做的一个总结
其中一个具体视频地址如下