事件流
当用户鼠标点击或者程序主动触发都会产生事件,比如用户点击了网页,那这个过程到底发生了什么?
graph LR
用户-->鼠标
鼠标-->操作系统
操作系统-->浏览器
浏览器-->网页
此时网页
已经知道了用户点击了鼠标,那么首先它需要知道当前鼠标指针所在的屏幕坐标screenX,screenY
,这个可以通过操作系统 API 得到
得到屏幕坐标之后,接下来需要知道的就是用户到底点了网页上的具体哪个元素,我们知道网页内所有元素是一颗 dom 树,可以这样理解,渲染到屏幕上就是一个一个层次交叠的方块,每个元素都有自己的坐标xy和宽高
这个信息,其中坐标 xy 可以映射为屏幕上的坐标 xy,我们先把这个信息称之为bound
,代表了该元素在屏幕上的边界信息
此时浏览器会从树的根部遍历整棵树,把所有bound
包含了screenX,screenY
的元素都找出来,假设上图的红点就是我们的点击位置,可以想象为一颗子弹从屏幕外射向屏幕里面,那么我们得到三个元素都和这个子弹发生了碰撞:body > div.wrap > div.content
,这个过程称之为捕获
阶段
阅读全文 »»