Window

[TOC]

索引

~~实例属性~~：

window.document：指向当前窗口加载的文档（即 Document 对象），用于操作 DOM。
window.history：管理浏览历史（如 history.back(), history.pushState()）。
window.indexedDB：IDBFactory，为应用程序提供异步访问索引数据库的能力。
window.localStorage / window.sessionStorage：浏览器存储 API。
window.location：提供当前 URL 的信息和控制导航（如 location.href、location.reload()）。
window.navigator：获取浏览器信息（如用户代理、语言、平台等）。
window.opener：返回对打开当前窗口的 window 的引用。
window.performance：Performance ，返回包括 timing 和 navigation 属性的Performance对象，每个属性都是提供性能相关数据的对象。
window.screen：访问屏幕信息（如 screen.width, screen.height）。

~~实例方法~~：

定时器：

window.setTimeout()：(callback,delay?,...args?)，用于在指定延迟时间后执行函数或代码的全局方法。
window.setInterval()：(callback,delay,...args?)，用于周期性无限循环调用函数或代码直到被显式取消的全局方法。
window.clearTimeout()：(timeoutID)，用于取消由 setTimeout() 创建的定时器的全局方法。可以阻止尚未执行的定时器回调函数的运行。
window.clearInterval()：(intervalID)，用于终止由 setInterval() 创建的周期性定时器的全局方法。

弹窗交互：

window.alert()：(message)，用于在浏览器中显示一个模态对话框的全局方法，向用户展示一条消息并等待用户点击确认按钮，常用于简单的用户提示或调试。
window.prompt()：(text,defaultText?)，用于显示一个模态对话框的全局方法，允许用户输入文本并返回输入内容。适用于快速获取用户输入的场景。
window.confirm()：(message)，用于显示一个模态对话框的全局方法，允许用户通过点击“确定”或“取消”按钮进行二元选择（确认或取消）。

窗口：

window.open()：(url?,target?,windowFeatures?)，用于打开新浏览器窗口或标签页的全局方法。可以控制新窗口的 URL、尺寸、位置、工具栏等
window.close()：()，用于关闭当前浏览器窗口或标签页的方法。其行为受浏览器安全策略限制。

网络请求：

window.fetch()：(url, options?)，用于发起网络请求的现代 API，基于 Promise 设计，取代了传统的 XMLHttpRequest。

CSS样式：

window.getComputedStyle()：(element,pseudoEl?)，只读，用于获取元素最终计算后的 CSS 样式的方法。

帧动画：

window.requestAnimationFrame()：(callback)，一种浏览器提供的机制，用于在浏览器的下一次重绘之前执行一个函数，它被广泛应用于动画的实现。
window.cancelAnimationFrame()：(requestID)，用于取消由 requestAnimationFrame() 请求的动画帧的方法。

事件：

鼠标事件：

click：鼠标点击元素（按下并释放左键）。
dblclick：鼠标双击元素。
contextmenu：右键点击元素（弹出上下文菜单前）。
mousedown / mouseup：鼠标按下 / 释放。
mousemove：鼠标在元素内移动。
mouseenter / mouseleave：不冒泡，鼠标进入 / 离开元素本身。仅在进入目标元素时触发一次，子元素之间移动不触发。
mouseover / mouseout：冒泡，鼠标进入 / 离开元素或其子元素。鼠标在元素和子元素之间移动时会重复触发。

键盘事件：

keydown：按下键盘任意键。
keyup：松开键盘按键。

表单事件：

submit：表单提交。
reset：表单重置。
input：输入框内容实时变化。
change：表单元素值变化并失焦（如输入框、下拉框）。
focus / blur：元素获得 / 失去焦点。

窗口事件：

DOMContentLoaded：HTML 解析完成（无需等待样式、图片）。
load：页面及资源（如图片）加载完成。
beforeunload：窗口关闭或刷新前。
resize：窗口大小变化。
scroll：页面滚动。

过渡事件：

transitionend：CSS 过渡结束播放。

触摸事件：

touchstart：触摸开始。
touchmove：触摸移动。
touchend：触摸结束。

剪切板事件：

copy / paste：复制 / 粘贴内容。

媒体事件：

play / pause：媒体播放 / 暂停。

Window

实例属性

window.document：指向当前窗口加载的文档（即 Document 对象），用于操作 DOM。
window.history：管理浏览历史（如 history.back(), history.pushState()）。
window.indexedDB：IDBFactory，为应用程序提供异步访问索引数据库的能力。
window.localStorage / window.sessionStorage：浏览器存储 API。
window.location：提供当前 URL 的信息和控制导航（如 location.href、location.reload()）。
window.navigator：获取浏览器信息（如用户代理、语言、平台等）。
window.opener：返回对打开当前窗口的 window 的引用。
window.performance：Performance ，返回包括 timing 和 navigation 属性的Performance对象，每个属性都是提供性能相关数据的对象。
window.screen：访问屏幕信息（如 screen.width, screen.height）。

实例方法

定时器

setTimeout()

window.setTimeout()：(callback,delay?,...args?)，用于在指定延迟时间后执行函数或代码的全局方法。

callback：()=>void，要执行的回调函数。
delay?：number，默认：0，延迟时间（单位：毫秒）。
...args?：any，传递给 callback 的额外参数（ES5+ 支持）。
返回：
timeoutID：number，表示定时器 ID，用于通过clearTimeout(timeoutID)取消定时器。

特性：

this绑定问题：直接传递对象方法时，this 会指向全局对象（浏览器中为 window）。

const obj = {
  name: "Bob",
  greet() {
    console.log(`Hello, ${this.name}`); // this 可能指向 window
  },
};
setTimeout(obj.greet, 1000); // 输出：Hello, undefined

解决方案：使用箭头函数、bind 或包裹函数绑定上下文。

setTimeout(() => obj.greet(), 1000); // 输出：Hello, Bob
setTimeout(obj.greet.bind(obj), 1000); // 同上

执行时机的不确定性：JS是单线程的，若主线程被阻塞（如长时间运算），定时器的回调可能延迟执行。

setTimeout(() => console.log("Delayed log"), 100);
// 主线程阻塞
for (let i = 0; i < 1e9; i++); // 回调会在循环结束后执行

最小延迟限制：浏览器通常有最小延迟（如 4ms），尤其在嵌套定时器中。

// 嵌套定时器的延迟会被强制设为至少 4ms
setTimeout(() => {
  setTimeout(() => console.log("Nested"), 0);
}, 0);

示例：

基础用法

// 延迟 2 秒后执行
setTimeout(() => {
  console.log("Executed after 2000ms");
}, 2000);

传递参数

// 向回调函数传递参数
setTimeout(
  (a, b) => {
    console.log(a + b); // 30
  },
  1000,
  10,
  20
);

取消定时器

const timeoutID = setTimeout(() => {
  console.log("This will not run");
}, 5000);

// 在 5 秒前取消
clearTimeout(timeoutID);

setInterval()

window.setInterval()：(callback,delay,...args?)，用于周期性无限循环调用函数或代码直到被显式取消的全局方法。

callback：()=>void，要重复执行的回调函数。
delay：number，最小值：0，两次执行之间的间隔时间（单位：毫秒）。
...args?：any，传递给 callback 的额外参数（ES5+ 支持）。
返回：
intervalID ：number，表示定时器 ID，用于通过clearInterval(intervalID )取消定时器。
特性：等同于setTimeout()的特性

示例：

基础用法：每秒更新一次时间

// 每秒更新一次时间
setInterval(() => {
  const time = new Date().toLocaleTimeString();
  console.log(`Current time: ${time}`);
}, 1000);

动态控制定时器：

let intervalID;
let count = 0;

function startCounter() {
  intervalID = setInterval(() => {
    console.log(`Count: ${count++}`);
    if (count >= 5) clearInterval(intervalID); // 达到条件后停止
  }, 1000);
}

startCounter();

传递参数：

// 每隔 2 秒发送带参数的请求
setInterval(
  (url, retry) => {
    fetch(url).catch(() => retry && console.log("Retrying..."));
  },
  2000,
  "https://api.example.com",
  true
);

clearTimeout()

window.clearTimeout()：(timeoutID)，用于取消由 setTimeout() 创建的定时器的全局方法。可以阻止尚未执行的定时器回调函数的运行。

timeoutID：number，要取消的定时器的唯一标识符，由 setTimeout() 返回。
特性：
1. 参数必须匹配：必须使用 setTimeout() 返回的原始 ID，重新赋值或计算后的值可能无效。
  js
```
const timeoutID = setTimeout(() => {}, 1000);
const fakeID = timeoutID + 1;
clearTimeout(fakeID); // 无效，不会取消原定时器
```
  1
  2
  3
2. 静默失败机制：如果传入无效的 timeoutID，浏览器不会抛出错误，但也不会执行任何操作。
  js
```
clearTimeout(12345); // 无效 ID，无效果
clearTimeout("abc"); // 非数字，无效果
```
  1
  2
3. 与 clearInterval() 的关系：它们的 ID 共享同一数值池，某些情况下可以互换使用，但强烈建议保持一致性。
  js
```
const intervalID = setInterval(() => {}, 1000);
clearTimeout(intervalID); // 可能有效，但代码可读性差
```
  1
  2

示例：

取消未执行的定时器：在定时器回调执行前，主动终止任务。

const timeoutID = setTimeout(() => {
  console.log("This will not run");
}, 5000);

// 在 5 秒前取消
clearTimeout(timeoutID);

动态控制异步流程：根据条件（如用户操作）提前终止延迟任务。

let timeoutID;

function startDelay() {
  timeoutID = setTimeout(() => {
    console.log("Task executed");
  }, 3000);
}

function cancelDelay() {
  if (timeoutID) {
    clearTimeout(timeoutID);
    console.log("Task canceled");
  }
}

clearInterval()

window.clearInterval()：(intervalID)，用于终止由 setInterval() 创建的周期性定时器的全局方法。

intervalID：number，要取消的定时器的唯一标识符，由 setInterval() 返回。
特性：等同于clearTimeout()的特性

示例：

终止周期性任务：停止不再需要的重复操作（如数据轮询、动画更新）。

let intervalID = setInterval(() => {
  console.log("Updating data...");
}, 5000);

// 用户手动停止更新
document.getElementById("stopButton").addEventListener("click", () => {
  clearInterval(intervalID);
});

条件性终止：根据逻辑动态停止定时器。

let counter = 0;
const intervalID = setInterval(() => {
  console.log(counter++);
  if (counter >= 10) clearInterval(intervalID); // 执行 10 次后停止
}, 1000);

弹窗交互

alert()

window.alert()：(message)，用于在浏览器中显示一个模态对话框的全局方法，向用户展示一条消息并等待用户点击确认按钮，常用于简单的用户提示或调试。

message：any，要显示在弹窗中的文本内容，会被隐式转换为字符串。

特性：

阻塞性：弹窗会暂停脚本执行，直到用户点击“确定”按钮。

console.log("Start");
alert("Pausing execution...");   // 阻塞后续代码
console.log("Resumed");          // 用户点击确定后执行

纯文本显示：弹窗内容不支持 HTML 标签（会被转义为纯文本）。
js
```
alert("<b>Hello</b>");           // 显示为 "<b>Hello</b>"
```
1
换行支持：通过 \n 实现多行文本。
js
```
alert("Line 1\nLine 2\nLine 3");
```
1

示例：

基本使用：

alert("Hello, World!");          // 字符串
alert(123);                      // 数字 → 转换为 "123"
alert({ name: "Alice" });        // 对象 → 转换为 "[object Object]"
alert([1, 2, 3]);                // 数组 → 转换为 "1,2,3"
alert(null);                     // null → 转换为 "null"
alert(undefined);                // undefined → 转换为 "undefined"

动态生成消息

const count = 5;
alert(`剩余次数：${count} 次`); // 模板字符串嵌入变量

调试对象

const data = { id: 1, items: ["A", "B"] };
alert(JSON.stringify(data, null, 2)); 
// 输出格式化后的 JSON：
// {
//   "id": 1,
//   "items": ["A", "B"]
// }

prompt()

window.prompt()：(text,defaultText?)，用于显示一个模态对话框的全局方法，允许用户输入文本并返回输入内容。适用于快速获取用户输入的场景。

text：any，对话框中显示的提示信息，用于引导用户输入，会隐式转换为字符串。
defaultText?：any，输入框的默认预填内容，会隐式转换为字符串。
返回：
- string：用户点击确定，输入框有内容。
- ""：用户点击确定，输入框为空。
- null：用户点击取消或关闭对话框。
特性：
1. 模态阻塞：弹窗会暂停 JavaScript 执行，直到用户响应。
2. 无法自定义样式：弹窗外观由浏览器控制，无法修改按钮、标题或布局。
3. 浏览器限制：现代浏览器可能阻止非用户触发的弹窗（如页面加载时自动弹出）。
4. 跨域 iframe：部分浏览器禁止在跨域 iframe 中调用 prompt()。
5. 输入验证：用户可能输入空字符串或无效数据，需在代码中验证：
  js
```
let input;
do {
  input = prompt("请输入有效数字：");
} while (input !== null && isNaN(input));
```
  1
  2
  3
  4

示例：

基础用法：

const color = prompt("您最喜欢的颜色是？", "蓝色");
if (color !== null) {
  alert(`您选择了：${color}`);
} else {
  alert("未选择颜色。");
}

confirm()

window.confirm()：(message)，用于显示一个模态对话框的全局方法，允许用户通过点击“确定”或“取消”按钮进行二元选择（确认或取消）。

message：any，对话框中显示的提示信息，会隐式转换为字符串。
返回：
- true，用户点击确定。
- false，用户点击取消或关闭对话框。

特性：

阻塞性：弹窗会暂停 JavaScript 执行，直到用户响应。

console.log("开始操作");
const choice = confirm("继续吗？"); // 阻塞后续代码
console.log("用户选择：", choice); // 用户响应后执行

纯文本显示：不支持 HTML 标签（会被转义为纯文本）。

confirm("<b>删除</b>所有数据？"); // 显示为 "<b>删除</b>所有数据？"

换行支持：通过 \n 实现多行文本。

confirm("确认执行以下操作？\n1. 删除文件\n2. 清空回收站");

示例：

确认提交表单：

if (confirm("确认提交表单吗？")) {
  submitForm(); // 用户点击确定
} else {
  cancelSubmission(); // 用户点击取消
}

窗口

open()

window.open()：(url?,target?,windowFeatures?)，用于打开新浏览器窗口或标签页的全局方法。可以控制新窗口的 URL、尺寸、位置、工具栏等属性。

url?：string，新窗口加载的 URL（字符串），留空则打开空白页。
target?：string，定义新窗口的打开方式（参考 a 标签的 target 属性）。
- _blank：默认，在新标签页或新窗口中打开。
- _self：在当前窗口或标签页打开（覆盖当前页面）。
- _parent：在父框架中打开（适用于 iframe 嵌套场景）。
- _top：在顶层窗口中打开。
- 自定义名称：复用同名窗口，如 "myWindow"（若存在则覆盖，否则新建）。
windowFeatures?：string，定义新窗口特性的字符串（如尺寸、工具栏等）。
返回：
- window：成功打开，返回新窗口的 Window 对象，可通过该对象操作新窗口的 DOM 或方法。
- null：被阻止或失败，返回 null，通常因浏览器弹窗拦截或用户设置导致。

特性：

windowFeatures 常用特性：

特性名	作用	示例值
`width`	窗口宽度（像素）	`width=600`
`height`	窗口高度（像素）	`height=400`
`left`	窗口左侧相对于屏幕的横坐标（像素）	`left=100`
`top`	窗口顶部相对于屏幕的纵坐标（像素）	`top=200`
`menubar`	是否显示菜单栏	`menubar=yes`
`toolbar`	是否显示工具栏	`toolbar=no`
`location`	是否显示地址栏	`location=yes`
`status`	是否显示状态栏	`status=no`
`resizable`	是否允许调整窗口大小	`resizable=yes`
`scrollbars`	是否显示滚动条	`scrollbars=yes`
`fullscreen`	是否全屏（部分浏览器禁用此特性）	`fullscreen=yes`

弹窗拦截：用户触发规则：大多数浏览器只允许在用户交互（如点击事件）中调用，否则可能被拦截。

// 正确：在按钮点击事件中打开窗口
button.addEventListener("click", () => window.open());

// 错误：直接调用可能被拦截
window.open("https://example.com"); // 非用户触发时可能失败

跨域限制：若新窗口跨域，父窗口无法通过返回的 Window 对象访问其 DOM 或方法（除非使用 postMessage 通信）。
js
```
const newWin = window.open("https://another-domain.com");
newWin.document.title = "Changed Title"; // 跨域时报错
```
1
2
窗口特性兼容性：部分特性（如 fullscreen）可能不被所有浏览器支持，需测试兼容性。

示例：

打开并操作新窗口：

const newWindow = window.open("", "demoWindow", "width=300,height=200");
if (newWindow) {
  newWindow.document.write("<h1>New Window Content</h1>");
  newWindow.document.close();
}

检测弹窗是否被拦截：

function openSafe() {
  const newWin = window.open("https://example.com");
  if (!newWin) {
    console.error("弹窗被阻止！");
  }
}
// 绑定到用户点击事件
document.getElementById("openBtn").addEventListener("click", openSafe);

close()

window.close()：()，用于关闭当前浏览器窗口或标签页的方法。其行为受浏览器安全策略限制。

特性：
1. 关闭权限：
  - 脚本打开的窗口：可通过 window.close() 直接关闭。
  js
```
// 通过 window.open() 打开新窗口，并关闭它
const newWindow = window.open("", "_blank");
newWindow.close(); // 允许关闭
```
  1
  2
  3
  - 用户直接打开的窗口：大多数现代浏览器默认禁止通过脚本关闭，需用户显式触发（如点击按钮）。
  js
```
// 尝试关闭主窗口（可能被浏览器阻止）
window.close();
```
  1
  2
2. 用户交互要求：关闭操作通常需由用户触发的代码执行（如点击事件）。
  js
```
// 允许关闭（用户点击触发）
document.getElementById("closeBtn").addEventListener("click", () => {
  window.close();
});
```
  1
  2
  3
  4
3. 跨域限制：无法通过脚本关闭不同源的窗口（遵循同源策略）。
4. iframe 中的行为：在 iframe 中调用 window.close() 会尝试关闭父窗口（若允许），但通常被浏览器阻止。
  js
```
// iframe 内部脚本（通常无效）
window.close(); // 可能无法关闭父窗口
```
  1
  2
5. 异常处理：无直接错误反馈：若关闭失败，浏览器不会抛出异常，需通过 try-catch 或间接检测。
  js
```
try {
  window.close();
} catch (e) {
  console.error("关闭失败：", e.message);
}
```
  1
  2
  3
  4
  5

示例：

关闭脚本打开的窗口：

// 打开新窗口并自动关闭
const newWindow = window.open("", "_blank");
setTimeout(() => newWindow.close(), 3000); // 3 秒后关闭

用户触发关闭主窗口：

html

<button id="closeBtn">关闭当前窗口</button>
<script>
  document.getElementById("closeBtn").addEventListener("click", () => {
    if (confirm("确定要关闭窗口吗？")) {
      window.close(); // 用户点击后尝试关闭
    }
  });
</script>

网络请求

fetch()

window.fetch()：(url, options?)，用于发起网络请求的现代 API，基于 Promise 设计，取代了传统的 XMLHttpRequest。

url：string | Request，指定请求的目标 URL 或预配置的 Request 实例。
options?：{}，配置请求的选项对象（如请求方法、请求头、请求体等）。
- method?：GET|POST|PUT|DELETE|PATCH，默认：GET，HTTP请求方法。
- headers?：object | Headers，请求头信息。
- body?：string|Blob|FormData，请求体数据（GET 或 HEAD 请求不能包含 body）。
- mode?：cors|no-cors|same-origin，默认：cors，请求模式
- credentials?：omit|same-origin|include，默认：same-origin，是否发送凭据（cookie）。
  - omit：不发送。
  - same-origin：同源发送。
  - include：始终发送。
- cache?：default|no-store|reload|...，缓存策略。
- redirect?：follow|error|manual，重定向处理方式。
  - follow：自动跟随
  - error：报错
  - manual：手动处理
- signal?：AbortSignal，用于取消请求的 AbortSignal 对象（结合 AbortController 使用）。
返回：
result：Response，Promise 对象，解析为 Response 对象。
- 常见属性：
- status：HTTP 状态码（如 200, 404）。
- statusText：状态描述（如 OK, Not Found）。
- headers：响应头信息（可通过 headers.get('Content-Type') 获取）。
- ok：布尔值，表示状态码是否在 200-299 范围内。
- 常见方法：
- json()：解析响应体为 JSON 对象。
- text()：解析响应体为字符串。
- blob()：解析响应体为 Blob 对象。
- formData()：解析响应体为 FormData 对象。
- arrayBuffer()：解析响应体为 ArrayBuffer 对象。
特性：
1. 错误处理：
  - HTTP 错误状态码：fetch 不会因 HTTP 错误状态码（如 404, 500）而拒绝 Promise，需手动检查 response.ok。
  js
```
fetch(url)
  .then(response => {
    if (!response.ok) throw new Error(`HTTP 错误：${response.status}`);
    return response.json();
  });
```
  1
  2
  3
  4
  5
  - 网络错误：如请求无法到达服务器，Promise 会被拒绝。
2. CORS 限制：
  - 跨域请求需服务器设置 Access-Control-Allow-Origin 响应头。
  - 非简单请求（如 POST 带非标准头）会触发预检请求（Preflight）。
3. 兼容性：所有现代浏览器均支持 fetch，但旧版浏览器（如 IE）需使用 Polyfill（如 whatwg-fetch）。

示例：

基本使用-GET

// 字符串形式
fetch('https://api.example.com/data');

// Request 对象形式
const request = new Request('https://api.example.com/data', { method: 'GET' });
fetch(request);

基本使用-POST

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer xyz'
  },
  body: JSON.stringify({ key: 'value' }),
  credentials: 'include',
  mode: 'cors'
});

链式处理示例

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) throw new Error('请求失败');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('错误：', error));

完整示例：考虑各种边界判断

async function fetchData(url) {
  try {
    const response = await fetch(url, {
      method: 'GET',
      headers: { 'Accept': 'application/json' },
      credentials: 'include'
    });

    if (!response.ok) throw new Error(`HTTP 错误：${response.status}`);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('请求失败：', error);
  }
}

fetchData('https://api.example.com/data');

取消请求：使用 AbortController 中止正在进行的请求

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') console.log('请求已取消');
  });

// 取消请求
controller.abort();

上传文件：通过 FormData 发送文件。

const formData = new FormData();
formData.append('file', fileInput.files[0]);

fetch('https://api.example.com/upload', {
  method: 'POST',
  body: formData
});

处理流数据：逐步读取大文件或流。

readableStream.getReader()：(options?)，创建一个读取器并将流锁定于其上。一旦流被锁定，其他读取器将不能读取它，直到它被释放。

fetch('https://api.example.com/large-file')
  .then(response => {
    const reader = response.body.getReader();
    return new ReadableStream({
      start(controller) {
        function push() {
          reader.read().then(({ done, value }) => {
            if (done) {
              controller.close();
              return;
            }
            controller.enqueue(value);
            push();
          });
        }
        push();
      }
    });
  })
  .then(stream => new Response(stream))
  .then(response => response.text())
  .then(text => console.log(text));

CSS样式

getComputedStyle()

window.getComputedStyle()：(el,pseudoEl?)，只读，用于获取元素最终计算后的 CSS 样式的方法。

element：Element，要获取样式的 DOM 元素。
pseudoEl?：string，默认：null，指定要匹配的伪元素选择器字符串，如:hover、::after。
返回：
style：CSSStyleDeclaration，包含元素所有计算后的 CSS 属性值。
特性：
- 获取计算后的样式值：返回的值是浏览器解析后的最终结果。
- 支持伪元素样式：通过第二个参数获取伪元素的样式。
- 性能优化：频繁调用可能影响性能（尤其在循环中），建议缓存结果。
- 隐藏元素的样式：若元素为 display: none，某些属性（如 width、height）可能返回 auto。

对比el.style：

特性	`window.getComputedStyle()`	`element.style`
样式来源	所有生效样式（内联+CSS+默认）	仅内联样式
返回值类型	计算后的绝对值（如 `px`）	原始设置值（如 `%`、`em`）
可写性	只读	可读写
伪元素支持	是	否

示例：

获取元素的最终宽高

const element = document.getElementById("box");
const style = window.getComputedStyle(element);

const width = style.width; // "300px"
const height = style.height; // "200px"

检查伪元素的样式

html

<style>
  #tip::after {
    content: "（必填）";
    color: red;
  }
</style>
<div id="tip">用户名</div>

<script>
  const tip = document.getElementById("tip");
  const pseudoStyle = getComputedStyle(tip, "::after");
  console.log(pseudoStyle.content); // 输出 "\"（必填）\""
  console.log(pseudoStyle.color); // 输出 "rgb(255, 0, 0)"
</script>

对比内联样式与计算样式

html

<div id="test" style="font-size: 16px">Hello</div>

<script>
  const div = document.getElementById("test");
  console.log(div.style.fontSize); // "16px"（仅内联样式）
  console.log(getComputedStyle(div).fontSize); // "16px"（计算后值）

  // 若 CSS 类设置 font-size: 1.2em;
  console.log(getComputedStyle(div).fontSize); // 实际像素值（如 "19.2px"）
</script>

帧动画

requestAnimationFrame()

window.requestAnimationFrame()：(callback)，一种浏览器提供的机制，用于在浏览器的下一次重绘之前执行一个函数，它被广泛应用于动画的实现。

callback：(timestamp?) => void，当浏览器准备好绘制下一帧时执行。
- timestamp?：ms，表示调用时的时间戳。可用于计算动画的进度。
注意： 它能够与浏览器的渲染帧同步，减少不必要的重绘，从而提高性能。动画过渡平滑。
注意： 当页面被切换到后台时，requestAnimationFrame() 会暂停动画的执行，从而节省资源。
返回：
id：number，返回一个整数 ID，该 ID 可以传递给 cancelAnimationFrame() 来取消该帧的请求。

/** 让一个矩形在屏幕上移动 */
var x = 50;
var y = 50;
var dx = 2;
var dy = 2;

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
    ctx.fillStyle = 'green';
    ctx.fillRect(x, y, 50, 50); // 绘制矩形

    x += dx; // 更新 x 坐标
    y += dy; // 更新 y 坐标

    // 如果矩形到达边缘，改变运动方向
    if (x + 50 > canvas.width || x < 0) {
        dx = -dx;
    }
    if (y + 50 > canvas.height || y < 0) {
        dy = -dy;
    }

    requestAnimationFrame(animate); // 请求下一帧
}
animate(); // 启动动画

cancelAnimationFrame()

window.cancelAnimationFrame()：(requestID)，用于取消由 requestAnimationFrame() 请求的动画帧的方法。

requestID：number，由 requestAnimationFrame() 返回的动画请求标识符。
特性：
1. 精准控制：仅取消尚未执行的动画帧，已进入执行队列的回调不受影响。
2. 资源优化：终止不再需要的动画帧，减少不必要的计算和渲染。
3. 静默机制：对无效操作不抛出错误，确保代码健壮性。
4. 正确调用时机：必须在回调触发前调用，若动画帧已进入执行队列，无法阻止其执行。
  js
```
requestID = requestAnimationFrame((timestamp) => {
  console.log("已执行，无法取消"); 
});

// 尝试取消（此时回调可能已触发）
cancelAnimationFrame(requestID); // 可能无效
```
  1
  2
  3
  4
  5
  6
5. 浏览器兼容：
  - 现代浏览器支持：所有主流浏览器均支持无前缀的 cancelAnimationFrame()。
  - 旧版浏览器前缀：
  js
```
// 兼容性处理
const cancel = window.cancelAnimationFrame || 
               window.mozCancelAnimationFrame || 
               window.webkitCancelAnimationFrame;
cancel(requestID);
```
  1
  2
  3
  4
  5

示例：

手动停止动画：

let requestID;

function animate(timestamp) {
  // 动画逻辑
  requestID = requestAnimationFrame(animate);
}

// 启动动画
requestID = requestAnimationFrame(animate);

// 用户点击停止按钮
document.getElementById("stopBtn").addEventListener("click", () => {
  cancelAnimationFrame(requestID);
});

条件性终止：

let startTime;

function animate(timestamp) {
  if (!startTime) startTime = timestamp;
  const progress = timestamp - startTime;

  if (progress < 2000) { // 动画运行 2 秒后停止
    requestAnimationFrame(animate);
  } else {
    console.log("动画结束");
  }
}

const requestID = requestAnimationFrame(animate);

防抖优化：

let requestID;

function expensiveOperation() {
  // 高开销操作（如复杂计算）
}

// 防抖函数：确保动画帧在频繁调用时仅执行一次
function debouncedOperation() {
  cancelAnimationFrame(requestID); // 取消之前的请求
  requestID = requestAnimationFrame(expensiveOperation);
}

// 触发防抖操作（如滚动事件）
window.addEventListener("scroll", debouncedOperation);

事件

鼠标事件：

click：鼠标点击元素（按下并释放左键）。
dblclick：鼠标双击元素。
contextmenu：右键点击元素（弹出上下文菜单前）。
mousedown / mouseup：鼠标按下 / 释放。
mousemove：鼠标在元素内移动。
mouseenter / mouseleave：不冒泡，鼠标进入 / 离开元素本身。仅在进入目标元素时触发一次，子元素之间移动不触发。
mouseover / mouseout：冒泡，鼠标进入 / 离开元素或其子元素。鼠标在元素和子元素之间移动时会重复触发。

键盘事件：

keydown：按下键盘任意键。
keyup：松开键盘按键。

表单事件：

submit：表单提交。
reset：表单重置。
input：输入框内容实时变化。
change：表单元素值变化并失焦（如输入框、下拉框）。
focus / blur：元素获得 / 失去焦点。

窗口事件：

DOMContentLoaded：HTML 解析完成（无需等待样式、图片）。
load：页面及资源（如图片）加载完成。
beforeunload：窗口关闭或刷新前。
resize：窗口大小变化。
scroll：页面滚动。

过渡事件：

transitionend：CSS 过渡结束播放。

触摸事件：

touchstart：触摸开始。
touchmove：触摸移动。
touchend：触摸结束。

剪切板事件：

copy / paste：复制 / 粘贴内容。

媒体事件：

play / pause：媒体播放 / 暂停。

Window ​

索引 ​

Window ​

实例属性 ​

实例方法 ​

定时器 ​

setTimeout() ​

setInterval() ​

clearTimeout() ​

clearInterval() ​

弹窗交互 ​

alert() ​

prompt() ​

confirm() ​

窗口 ​

open() ​

close() ​

网络请求 ​

fetch() ​

CSS样式 ​

getComputedStyle() ​

帧动画 ​

requestAnimationFrame() ​

cancelAnimationFrame() ​

事件 ​

Window

索引

Window

实例属性

实例方法

定时器

setTimeout()

setInterval()

clearTimeout()

clearInterval()

弹窗交互

alert()

prompt()

confirm()

窗口

open()

close()

网络请求

fetch()

CSS样式

getComputedStyle()

帧动画

requestAnimationFrame()

cancelAnimationFrame()

事件