浏览器内置对象事件、setInterval定时器丢帧、事件委托＜前端学习笔记＞

最新推荐文章于 2023-10-16 10:18:12 发布

DZW5323

最新推荐文章于 2023-10-16 10:18:12 发布

阅读量449

点赞数

分类专栏：前端文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/DZW5323/article/details/125648536

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

setTimeout 和 setInterval

因为 setInterval 执⾏时间的不可确定性，所以⼤部分时候，我们会使⽤ setTimeout 来模拟
setInterval。
假设我们点击事件之后会触发 setInterval(func, 500) ，那么每隔 500ms 就会将 func 放⼊⼀次消
息队列，如果此时主栈中有其他代码执⾏的话，就会等待其他代码执⾏之后再读取消息队列中的函数执
⾏。但对于 setInterval，仅当没有该定时器的任何其他代码实例时，才将定时器代码添加到队列中，所以就会造成某个瞬间有次回调函数没有加进事件队列中去，造成丢帧。

(fun1被执行，所以fun2可以加入队列，fun3之前还有fun2实例未执行，不加入运行间隔比预期的小，宏观来看，fun3似乎被插入，1.7-2 < 0.5 实际运行fun2定时器代码)
在这里插入图片描述

使⽤ setTimeout 模拟之后的样⼦，每次执⾏完成之后再将下次的事件推⼊事件队列中
在这里插入图片描述

alert，confirm，prompt 等交互相关 API

alert 会弹出⼀个警告框
⽽ confirm 和 prompt 则可以与⽤户交互
- confirm 会弹出⼀个确认框，最
  终返回 true （⽤户点击确定）返回 false （⽤户点击取消）
- prompt ⽤户则可以输⼊⼀段⽂字，最终
  返回⽤户输出的结果。

Location

属性

href：当前 url
protocol：返回⼀个URL协议
host：返回⼀个URL的主机名和端⼝
hostname：返回URL的主机名
port：返回⼀个URL服务器使⽤的端⼝号
pathname：返回的URL路径名。
search：返回⼀个URL的查询部分
hash：返回⼀个URL的锚部分。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qFdUmVtM-1657115527155)(images/location.png)]

方法

reload：重新载⼊当前⻚⾯
replace：⽤新的⻚⾯替换当前⻚⾯

Document

title: document.title 可以设置或返回当前⻚⾯标题
domain: 展示当前⽹站的域名
url: 当前⽹站的链接
anchors: 返回所有的锚点，带 name 属性的 a 标签
forms: 返回所有的 form 标签集合
images: 返回所有的 img 标签集合
links: 返回所有带 href 属性的 a 标签

Text 类型

Text 类型包含所有纯⽂本内容，他不⽀持⼦节点，同时他的 nodeType 为 3

Element

Element 元素的 nodeType 均为 1 ，⼤多数标签都是⼀个 Element 实例

属性

tagName：返回当前元素的标签名

方法

getAttribute：获取当前节点属性的结果
setAttribute: 设置当前节点属性

总结（⾯试常考点 & 易错点）

全局定义的变量均可以通过 window 来进⾏访问。
使⽤ setInterval 需要注意，有可能代码并不是
以相同间隔执⾏。(存在定时器代码实例时，当前代码实例不入队列)
使⽤ alert 等 API 需要注意，JS 代码可能会被阻塞。
location 对象需要明确对于 URL 来说，每⼀个类型代表的具体值是什么。
document 对象主要衔接 JS 和我们的 DOM 元素。需要注意这⾥很多选择的结果是 array-like 的
类数组元素。以及使⽤ createFragment 代码⽚段等优化，来防⽌浏览器多次重排造成性能问题。
Element 和 Text 是两个我们常⻅且易考易⽤的两个 DOM 对象。
熟悉常⻅的⽅法和 debug ⽅式
（console.dir）其次写代码时需要明确我们当前的⽅法究竟是 JS 层⾯的，还是环境层⾯的。
history 因为和前端路由息息相关，我们需要熟悉新增的 pushState 和 replaceState ⽅法。

时间捕获和冒泡

DOM 是⼀个嵌套性的树形树状结构，在浏览器中的表现就是叠加在⼀起的，所以在浏览器中点击⼀个
区域，在 DOM 结构中会依次遍历多个 dom，⾃顶向下我们称为「事件捕获」，⾃下⽽上称为「事件
冒泡」
addEventListener 第三个参数为true 则在捕获阶段触发，第三个参数为 false
则在冒泡阶段触发

事件对象

event 作为事件的回调函数参数

属性

bubbles：表明事件是否冒泡
cancelable：表示是否可以取消事件的默认⾏为
currentTarget：事件当前正在处理的元素
defaultPrevented：为 true 则代表已经调⽤了 preventDefault 函数
detail：事件细节
eventPhase：事件所处阶段，
- 1 代表捕获
- 2 代表在事件⽬标
- 3 代表冒泡
type：事件类型（click 等）

方法

preventDefault：取消事件的默认⾏为
stopImmediatePropagation：取消事件的进⼀步捕获或冒泡，同时阻⽌事件处理程序调⽤
stopPropagation：取消事件的进⼀步捕获或冒泡

事件委托

event.target获取目标元素

Ajax

// xhr.open 接受三个参数，要发送的请求类型 get post、请求的 url、是否异步发送的布尔值
xhr.open('get', '/ajax.json', true);
// ------------------

// setRequestHeader设置请求头 
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// onreadystatechange 回调函数 // readyState请求状态
xhr.onreadystatechange = function() {
    if (xhr.readystate !== 4) return;
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        alert(xhr.responseText);
    } else {
        alert("错误：状态码 " + xhr.status + xhr.statusText);
    }
}