【八股系列】点击一个按钮,浏览器会做些什么事情【呈现效果时流程】?(js)

文章目录

  • [1. 事件的启程:捕获与目标识别](#1. 事件的启程:捕获与目标识别)
  • [2. 核心环节:事件处理与JavaScript的魔法](#2. 核心环节:事件处理与JavaScript的魔法)
    • [2.1. 识别事件源:](#2.1. 识别事件源:)
    • [2.2. 查找事件监听器:](#2.2. 查找事件监听器:)
    • [2.3. 执行JavaScript代码:](#2.3. 执行JavaScript代码:)
  • [3. 视觉重塑:UI的更新之旅](#3. 视觉重塑:UI的更新之旅)
  • [4. 事件的回响:冒泡与默认行为](#4. 事件的回响:冒泡与默认行为)
    • [4.1. 时间冒泡:](#4.1. 时间冒泡:)
    • [4.2. 默认行为处理:](#4.2. 默认行为处理:)
  • [5. 异步的轨迹:未来已来](#5. 异步的轨迹:未来已来)

引言

在我们日常浏览网页时,轻轻一点,似乎一切变化都发生在瞬间。但在这简单的动作背后,浏览器正进行着一系列复杂而精细的操作,确保每一个交互都能准确无误地完成。本文将带你深入探索,当我们在网页上点击一个按钮时,浏览器内部究竟经历了怎样的"旅程"。

1. 事件的启程:捕获与目标识别

故事的起点,始于你的指尖轻触鼠标的那一刻。首先,浏览器会从文档根节点开始向下遍历至目标元素 (本例中为按钮)的路径上,检查是否有设置的事件捕获监听器 。这是一个可选阶段,仅当有指定capture阶段的事件监听器时才会执行。这一过程是为了捕捉那些在捕获阶段注册的事件监听器,虽然它们并不常见,但在特定场景下扮演着关键角色。


2. 核心环节:事件处理与JavaScript的魔法

2.1. 识别事件源:

浏览器确定哪个元素被点击了。

2.2. 查找事件监听器:

浏览器查找与点击事件相关的所有JavaScript事件监听器(如onclick)。这些监听器可能直接绑定在按钮上,也可能通过事件委托方式绑定在其祖先元素上。

2.3. 执行JavaScript代码:

浏览器开始执行与该事件关联的JavaScript代码。这可能包括修改DOM、发起网络请求、修改页面样式、弹出警告框等多种操作。


3. 视觉重塑:UI的更新之旅

如果JavaScript代码修改了DOM(如添加、删除或修改元素),浏览器会重新计算布局(Layout)和绘制(Paint),以反映这些变化。这个过程可能涉及:

  • 重排(Reflow) :当DOM的变化影响了元素的位置或尺寸时,浏览器需要重新计算布局。
  • 重绘(Repaint):基于新的布局计算,浏览器重新绘制受影响的部分到屏幕上。

4. 事件的回响:冒泡与默认行为

4.1. 时间冒泡:

如果事件处理过程中没有被阻止(通过event.stopPropagation()),事件会从当前元素开始,向上冒泡至文档根节点,沿途触发在其祖先元素上注册的事件监听器(处于bubble阶段的)。

4.2. 默认行为处理:

在事件传播的最后阶段,如果事件没有被任何事件处理函数调用event.preventDefault()阻止,默认行为将被执行。对于按钮,其默认行为可能是提交表单或执行预定义的JavaScript函数。


5. 异步的轨迹:未来已来

如果JavaScript代码中包含了异步操作(如Ajax请求、setTimeout/setIntervalPromise等),这些操作会在事件处理完成后按照各自的时间线继续执行,不会阻塞其他脚本或页面渲染。


从一次简单的点击开始,到页面响应、更新,再到背后复杂的事件处理流程和异步操作,浏览器为我们编织了一个既即时又动态的网络世界。每一次点击,都是对现代Web技术精密运作的一次见证。

相关推荐
世伟爱吗喽几秒前
threejs入门学习日记
前端·javascript·three.js
爬虫程序猿10 分钟前
利用 Java 爬虫获取淘宝商品 SKU 详细信息实战指南
java·开发语言·爬虫
朝阳58114 分钟前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo14 分钟前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
He19550131 分钟前
Go初级之十:错误处理与程序健壮性
开发语言·python·golang
slim~33 分钟前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
一支鱼38 分钟前
leetcode常用解题方案总结
前端·算法·leetcode
小浣熊喜欢揍臭臭1 小时前
react+umi项目如何添加electron的功能
javascript·electron·react
惜.己1 小时前
针对nvm不能导致npm和node生效的解决办法
前端·npm·node.js