xiaoyangzhu的博客

笔记目录&思维导图-JavaScript设计模式与最佳实践

第 20 章 JavaScript API20.1Atomics与SharedArrayBuffer20.1.1 SharedArrayBuffer20.1.2 原子操作基础20.2跨上下文消息20.3Encoding API20.3.1 文本编码20.3.2 文本解码20.4File API 与 Blob API20.4.1File类型20.4.2Fi...

笔记目录&思维导图-JavaScript基础知识

笔记目录&思维导图-JavaScript进阶内容

DOM & BOM的目录

一 背景有事件冒泡时，也会触发相应的事件处理程序。这种能力在测试 Web 应用时特别有用。DOM3 规范指明了模拟特定类型事件的方式。IE8 及更早版本也有自己模拟事件的方式二 类型DOM事件模拟 IE事件模拟三 DOM事件模拟1、事件模拟过程： 第一步：使用 document.createEvent()方法创建一个 event 对象接收一个参数，此参数是一个表示要创建事件类型的字符串可用的字符串值 事件 定义 "UIEvents"...

一 内存与性能的关系在 JavaScript 中，页面中事件处理程序的数量与页面整体性能直接相关每个函数都是对象，都占用内存空间，对象越多，性能越差 为指定事件处理 程序所需访问 DOM 的次数会先期造成整个页面交互的延迟二 事件委托定义：事件委托利用事件冒泡，可以只使用一个事件处理程序来管理一种类型的事件使用事件委托，只要给所有元素共同的祖先节点添加一个事件处理程序， 就可以解决问题// click 事件冒泡到 document。这意味着可以为整个页面指定一个 onclick 事.

一 触摸事件触发场景：当手指放在屏幕上、在屏幕上滑动或从屏幕移开 时，触摸事件即会触发触摸事件：事件 定义 touchstar 手指放到屏幕上时触发（即使有一个手指已经放在了屏幕上） touchmove 手指在屏幕上滑动时连续触发。在这个事件中调用 preventDefault()可以阻止滚动 touchend 手指从屏幕上移开时触发 touchcancel 系统停止跟踪触摸时触发。文档中并未明确什么情况下停止跟踪 属性大全：鼠标事件的公共.

一 定义：以用于确定用户使用设备的方式二 事件orientationchange 事件 定义：以方便开发者判断用户的设备 是处于垂直模式还是水平模式 window.orientation 属性（3 种值）： 0 表示垂直模式 90 表示左转水平模式（主屏幕键在右侧） –90 表示右转水平模式（主屏幕键在左） // 以下是这个事件典型的用法：window.addEventListener("load", (event) => { let div .

一 定义DOM 规范并未涵盖浏览器都支持的所有事件。很多浏览器根据特定的用户需求或使用场景实现了 自定义事件。HTML5 详尽地列出了浏览器支持的所有事件二 事件1、contextmenu 事件定义：以专门用于表示何时该显示上下文菜单，从而允许开发者取消默认的上下文菜单并提供自定义菜单 事件冒泡：只要给 document 指定一个事件处理程序就可以处理页面上的所有同类事件。事件目标是触发操作的元素。 事件取消 在 DOM 合规的浏览器中使用 event.preventDefaul.

一 定义：用户操作键盘时触发的，是基于原始的 DOM0 实现的二 事件事件 定义 keydown 用户按下键盘上某个键时触发，而且持续按住会重复触发 keypress 用户按下键盘上某个键并产生字符时触发，而且持续按住会重复触发。Esc 键也会 触发这个事件。 DOM3 Events 废弃了 keypress 事件，而推荐 textInput 事件 keyup 用户释放键盘上某个键时触发 场景 场景一：输入事件只有一个，即 text.

一 定义合成事件是 DOM3 Events 中新增的，用于处理通常使用 IME 输入时的复杂输入序列。IME 可以让 用户输入物理键盘上没有的字符。例如，使用拉丁字母键盘的用户还可以使用 IME 输入日文。IME 通 常需要同时按下多个键才能输入一个字符。合成事件用于检测和控制这种输入。二 事件方法事件 作用 包含的值 在合成事件触发时，事件目标是接收文本的输入字段。唯 一增加的事件属性是 data，其中包含的值视情况而异 compositionstart 在 I.

一 定义鼠标事件还有一个名为滚轮事件的子类别 滚轮事件只有一个事件 mousewheel，反映的是鼠标滚 轮或带滚轮的类似设备上滚轮的交互二 客户端坐标0、属性：clientX 和 clientY1、定义：鼠标事件都是在浏览器视口中的某个位置上发生的 这些信息被保存在 event 对象的clientX 和 clientY 属性中 这两个属性表示事件发生时鼠标光标在视口中的坐标，所有浏览器都支持2、图示：3、获取方式：// 可以通过下面的方式获取鼠标事件的客户端坐标

DOM3 Events 定义了 9 种鼠标事件事件 定义 click 在用户单击鼠标主键（通常是左键）或按键盘回车键时触发。这主要是基于无障碍的考 虑，让键盘和鼠标都可以触发 onclick 事件处理程序 dbclick 在用户双击鼠标主键（通常是左键）时触发。这个事件不是在 DOM2 Events 中定义的，但得到了很好的支持，DOM3 Events 将其进行了标准化 mousedown 在用户按下任意鼠标键时触发。这个事件不能通过键盘触发 mouseenter

UI事件一览表属性/方法 描述 DOMActivate 元素被用户通过鼠标或键盘操作激活时触发（比 click 或 keydown 更通用）。 这个事件在 DOM3 Events 中已经废弃。因为浏览器实现之间存在差异，所以不要使用它 load 在 window 上当页面加载完成后触发，在窗套（<frameset>）上当所有窗格（<frame>） 都加载完成后触发，在元素上当图片加载完成后触发，在元素上当相应对象加载完成后触发 unload 在

焦点事件一览表属性/方法 定义 blur 当元素失去焦点时触发。这个事件不冒泡，所有浏览器都支持 DOMFocusIn 当元素获得焦点时触发。这个事件是 focus 的冒泡版。Opera 是唯一支持这个事 件的主流浏览器。DOM3 Events 废弃了 DOMFocusIn，推荐 focusin DOMFocusOut 当元素失去焦点时触发。这个事件是 blur 的通用版。Opera 是唯一支持这个事 件的主流浏览器。DOM3 Events 废弃了 DOMFocusO

一 事件类型所发生事件的类型决定了事件对象中会保存什么信息DOM3 Events 定义了如下事件类型。用户界面事件（UIEvent）：涉及与 BOM 交互的通用浏览器事件 焦点事件（FocusEvent）：在元素获得和失去焦点时触发 鼠标事件（MouseEvent）：使用鼠标在页面上执行某些操作时触发 滚轮事件（WheelEvent）：使用鼠标滚轮（或类似设备）时触发 输入事件（InputEvent）：向文档中输入文本时触发 键盘事件（KeyboardEvent）：使用键盘在页面上执行

一 定义在 DOM 中发生事件时，所有相关信息都会被收集并存储在一个名为 event 的对象中一些基本信息，比如导致事件的元素、发生的事件类型，以及可能与特定事件相关的任何其他数据二 DOM事件对象1、事件对象：在DOM合规的浏览器中，以DOM0或DOM2的方式指定事件处理程序，event对象是传给事件处理程序的唯一参数 事件对象包含与特定事件相关的属性和方法 event 对象只在事件处理程序执行期间存在，一旦执行完毕，就会被销毁let btn = document.get..

一 定义事件处理程序/事件监听器：为响应事件而调用的函数事件处理程序的名字以"on"开头eg. click事件 -> onclick load事件 -> onload二HTML事件处理程序1、表现方式：方式1：在HTML指定动作指令特定元素支持的每个事件都可以使用事件处理程序的名字以 HTML 属性的形式来指定 此时属性的值必须是能够执行的 JavaScript 代码<input type="button" value="Click Me" o...

事件流描述了页面接收事件的顺序

一 定义DocumentFragment类型是唯一一个在标记中没有对应表示的类型DOM将文档片段定义为“轻量级"文档，能够包含和操作节点，却没有完整文档那样额外的消耗 不能直接把文档片段添加到文档 文档片段的作用是充当其他要被添加到文档的节点的仓库二 创建文档片段：document.createDocumentFragment()文档片段本身永远不会被添加到文档树 如果文档中的一个节点被添加到一个文档片段，则该节点会从文档树中移除，不会再被浏览器渲染 添加到文档片段...

一 方法getAttribute() setAttribute() removeAttribute()二 属性name：属性名 value：属性值 specified：布尔值，表示属性使用的是默认值还是被指定的值三 创建元素：document.createAttribute()参数：属性名let attr = document.createAttribute("align"); attr.value = "left"; element.setAttributeNode(...

一 document.doctype属性版本：DOM Level 1 属性： name：文档类型的名称 entities：这个文档类型描述的实体的NamedNodeMap notations：这个文档类型描述的表示法的NamedNodeMap // 这个属性包含文档类型的名称，即紧跟在<!DOCTYPE 后面的那串文本。比如下面的 HTML 4.01 严格文档类型：<!DOCTYPE HTML PUBLIC "-// W3C// DTD HTML 4.01// E...

一 操作方法只要开始标签和结束标签之间有内容，就会创建一个文本节点appendData(text)：向节点末尾添加文本text deleteData(offset, count)：从位置offset开始删除count个字符 insertData(offset, count)：在位置offset插入text replaceData(offset, count, text)：用text替换从位置offset到offset+count的文本 splitText(offset)：在位置of...

一 HTML元素的属性id：元素在文档中的唯一标识符 title：包含元素的额外信息，通常以提示条形式展示 lang：元素内容的语言代码 dir：语言的书写方向（"ltr"表示从左到右 "rtl"表示从右到左） className 相当于class属性，用于指定元素的CSS类<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div> // 这个元素中的所有属性都...

一属性&方法操作方法：包括splitText()之外Text节点所有的字符串操作方法二 创建元素：document.createCDataSection()参数：传入节点内容来创建CData区块<div id="myDiv"><![CDATA[This is some content.]]></div>...

一 属性&方法操作方法：除splitText()之外Text节点所有的字符串操作方法 属性： nodeValue data // 注释节点可以作为父节点的子节点来访问。比如下面的 HTML 代码：<div id="myDiv"><!-- A comment --></div> // 这里的注释是<div>元素的子节点，这意味着可以像下面这样访问它：let div = document.getElementById("m...

一 文档子节点访问子节点的快捷方式：documentElement属性：始终指向HTML页面种的<html>元素 <html> <body> </body> </html> 访问子节点 文档只有一个子节点，即<html>元素 这个元素既可以通过 documentElement 属性获取，也可以通过 childNodes 列表访问le...

DOM Level 1 描述了名为Node 的接口，这个接口是所有DOM 节点类型都必须实现的。Node 接口在JavaScript 中被实现为Node 类型，在除IE 之外的所有浏览器中都可以直接访问这个类型。在JavaScript中，所有节点类型都继承Node 类型，因此所有类型都共享相同的基本属性和方法

一 层级任何 HTML 或 XML 文档都可以用 DOM 表示为一个由节点构成的层级结构二 关系：一个以特定节点为根的树形结构<html> <head> <title>Sample Page</title> </head> <body> <p>Hello World!</p> </body> </html> document 节点表示每.

软件与硬件相关的信息，通过screen和navigator对象暴露出来。利用这些API，可以获取关于操作系统、浏览器、硬件、设备位置、电池状态等方面的准确信息

一 什么是用户代理检测用户代理检测通过浏览器的用户代理字符串确定使用的是什么浏览器用户代理字符串包含在每个HTTP请求的头部，在JavaScript中可以通过navigator.userAgent二 用户代理的历史要求：HTTP规范（1.0和1.1)要求浏览器应该向服务器发送包含浏览器名称和版本信息的简短字符串浏览器 引擎核心 FireFox/Mozilla Gecko Safari Webkit ...

能力检测最适合用于决定下一步该怎么做，而不一定能够作为辨识浏览器的标志

一 作用history对象表示当前窗口首次使用以来用户的导航历史记录二 使用场景场景一：导航方法：go(）作用：可以在用户历史记录中沿任何方向导航，可以前进，也可以后退参数：一个整数，表示前进或后退多少步（负值为后退，正值为前进）/旧版本 可以传字符串history.go(-1);//后退一页history.go(1);//前进一页history.go(2);//前进两页// 旧版本浏览器history.go("wrox.com") //导航到最近...

一 接口定义的属性和方法navigator对象的属性通常用于确定浏览器的类型NavigatorID NavigatorLanguage NavigatorOnLine NavigatorContentUtils NavigatorStorage NavigatorStorageUtils NavigatorConcurrentHardware NavigatorPlugins NavigatorUserMedia二 使用场景场景一：检测插件作用：检测浏览器是否安装了某.

一 作用保存的是客户端能力信息 / 浏览器窗口外面的客户端显示器的信息二 属性

location提供了当前窗口中加载文档的信息，以及通常的导航功能

BOM的核心时window对象

一 function声明定义方式：function functionName( arg0, arg1,arg2,…){ 语句… }调用方式functionName ( arg0, arg1,arg2,… || 不带参数)特点：1、参数行为ECMAScript的参数在内部是用一个数组来表示的，函数接收到的始终为这个类数组（arguments)在函数体内可以通过arguments对象来访问这个参数数组，从而获取传递给函数的每一个参数用方括号 [ ] +下标值来访问每一个

JavaScript是ECMAScript的实现，ECMAScript是JavaScript的标准。在声明变量的声明命令上，ES5只有var命令、function命令2种，ES6有let命令、const命令、import命令、class命令4种，因此ES6有6种声明命令。一 变量与宿主环境的关系宿主环境宿主环境是指不仅提供基本的ECMAScript实现，同时也会提供该语言的扩展，以便语言与环境之间交互常见的宿主环境Web浏览器环境Node环境WebWorker环境顶层对