《WebKit 技术内幕》学习之五(3): HTML解释器和DOM 模型

3 DOM的事件机制

        基于 WebKit 的浏览器事件处理过程:首先检测事件发生处的元素有无监听者,如果网页的相关节点注册了事件的监听者则浏览器会将事件派发给 WebKit 内核来处理。另外浏览器可能也需要处理这样的事件(浏览器对于有些事件必须响应从而做出默认处理,比如通过鼠标滚轮来翻滚网页,鼠标所在位置的 HTML 元素上注册了滚动事件监听器)。事件到达 WebKit 内核即渲染引擎接收到一个事件后,会先检查那个元素是直接的事件目标,然后会经过自顶向下和自底向上的过程。

3.1 事件的工作过程
        事件在工作过程中使用两个主体,第一个是事件(event),第二个是事件目标(EventTarget)。WebKit 中用 EventTarget 类来表示 DOM 规范中 Events 部分定义的事件目标。

        每个 事件都有属性来标记该事件的事件目标。当事件到达事件目标(如一个元素节点)的时候,在这个目标上注册的监听者(Event Listeners)都会有触发调用,而这些监听者的调用顺序不是固定的,所以不能依赖监听者注册的顺序来决定你的代码逻辑。

 DOM标准对EventTarget 接口的定义。下图中的接口是用来注册和移除监听者的。

        事件处理最重要就是事件捕获(Event capture)和事件冒泡(Event bubbling)这两种机制。下图是事件捕获和事件冒泡的过程。

        当渲染引擎接收到一个事件的时候,它会通过 HitTest(WebKit 中的一种检查触发gkwrd哪个区域的算法)检查哪个元素是直接的事件目标。在上图 中,以 “img” 为例,假设它是事件的直接目标,这样,事件会经过自顶向下和自底向上的两个过程。

        事件的捕获是自顶向下,事件先是到 document 节点,然后一路到达目标节点。在上图  中,顺序就是 “#document” -> “HTML” -> “body” -> “img” 这样一个顺序。事件可以在这一传递过程中被捕获,只需要在注册监听者的时候设置相应参数即可。在前面的接口图中的接口add Event L istener的第三个参数就是表示这个含义。默认情况下,其他节点不捕获这样的事件。如果网页注册了这样的监听者,那么监听者的回调函数会被调用,函数可以通过事件的 “stopPropagation” 函数来阻止事件向下传递。

        事件的冒泡过程是从下向上的顺序,它的默认行为是不冒泡,但是是事件包含一个是否冒泡的属性。当这一属性为真的时候,渲染引擎会将该事件首先传递给事件的目标节点的父亲,然后是父亲的父亲,以此类推。同捕获动作一样,这此监听函数也可以使用 “stopPropagation” 函数来阻止事件向上传递。

3.2 WebKit 的事件处理机制
        DOM 的事件分为很多种,与用户相关的只是其中的一种,称为 UIEvent ,其他的包括 CustomEvent、MutationEvent 等。UIEvent 又可以分为很多种,包括但是不限于 FocusEvent、MouseEvent、KeyboardEvent、Composition 等。

        基于 WebKit 的浏览器事件处理过程,首先是做 HitTest ,查找事件发生处的元素,检查该元素有无监听者。如果网页的相关节点注册了事件的监听者,那么浏览器会把事件派发给 WebKit 内核来处理。同时,浏览器也可能需要理解和处理这样的事件。这主要是因为,有些事件浏览器必须响应从而对网页作默认处理。

              图中黑色圆形表示光标的当前位置,光标下面的元素注册了一个监听鼠标滚轮事件的函数,当用户滚动鼠标的时候,浏览器经过HitTest之后,发现有监听者,它需要将这些事件传递给WebKit,WebKit实际上最后调用JavaScript引擎来触发监听者函数。但是,浏览器可能也会根据这些事件仍然处理它的默认行为,这会导致竞争冲突,所以Web开发者在监听者的代码中应该调用事件的preventDefault函数来阻止浏览器触发它的默认处理行为,也就是不需要滚动整个网页。

        当事件的派发机制遇到网页的框结构特别是多框结构的时候,情况变得稍显复杂,这是因为事件需要在多个框和多个DOM树之间传递。当触控事件(Touch Events)被引入后情况变得更为复杂。

        下图 简单描述了鼠标事件的调用过程,这一过程本身是比较简单的,复杂之处在于 WebKit 的 EventHandler 类。

          EventHandler 类是处理事件的核心类,它除了需要将各种事件传给 JavaScript 引擎以调用响应的监听者之外,它还会识别鼠标事件,来触发调用右键菜单、拖放效果等与事件密切相关的工作,而且 EventHandler 类还支持网页的多框结构。EventHandler 类的接口比较容易理解,但是它的处理逻辑极其复杂。

        WebKit 中还有些跟事件处理相关的其他类,例如 EventPathWalker、EventDispatcher 类等,这些类都是为了解决事件在 DOM 树中传递的问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/640306.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

makefile 编译动态链接库使用(.so库文件)

makefile 编译动态链接库使用(.so库文件) 动态链接库:不会把代码编译到二进制文件中,而是在运行时才去加载, 好处是程序可以和库文件分离,可以分别发版,然后库文件可以被多处共享 动态链接库 动态&#…

vue3项目eslint配置、配置prettier(格式化配置)

文章链接: 全部配置链接 第一步:eslint配置、配置prettier(代码格式化):点击链接 (1) .eslint.cjs—eslint配置文件 (2).eslintignore—校验忽略文件 (3).prettierrc.json添加规则 (4).prettierignore忽略文件 prettierrc规范说明: npm install -D eslint-plugin-import…

gdip-yolo项目解读:gdip模块 |mdgip模块 |GDIP regularizer模块的使用分析

gdip-yolo是2022年提出了一个端到端的图像自适应目标检测框架,其论文中的效果展示了良好的图像增强效果。其提出了gdip模块 |mdgip模块 |GDIP regularizer模块等模块,并表明这是效果提升的关键。为此对gdip-yolo的项目进行深入分析。 gdip-yolo的论文可以…

第15届蓝桥杯嵌入式省赛准备第三天总结笔记(使用STM32cubeMX创建hal库工程+串口接收发送)

因为我是自己搞得板子,原本的下程序和串口1有问题,所以我用的是串口2,用的PA2和PA3 一,使用CubeMX配置串口 选择A开头的这个是异步通信。 配置串口参数,往届的题基本用的9600波特率,所以我这里设置为9600…

C++——结构体

1,结构体基本概念 结构体属于用户自定义的数据类型,允许用户存储不同的数据类型。像int(整型),浮点型,bool型,字符串型等都是属于系统内置的数据类型。而今天要学习的结构体则是属于我们自定义…

导出 MySQL 数据库表结构、数据字典word设计文档

一、第一种 :利用sql语句查询 需要说明的是该方法应该适用很多工具,博主用的是navicat SELECT TABLE_NAME 表名,( i : i 1 ) AS 序号,COLUMN_NAME 列名, COLUMN_TYPE 数据类型, DATA_TYPE 字段类型, CHARACTER_MAXIMUM_LENGTH 长度, IS_NULLABLE…

Git error: RPC failed; result=22, HTTP code = 404 解决方法

文章目录 Git error: RPC failed; result22, HTTP code 404 解决方法 Git error: RPC failed; result22, HTTP code 404 解决方法 造成这种情况可能有很多原因,比如可以设置http.postBuffer大一点,也或者是git版本的问题,不过我的解决方法…

Linux: dev: glibc: 里面有很多的关于系统调用的函数

其实都没有实体源代码klogctl.c,而是通过编译时构造出来的源代码实体,比如klogctl这个函数,glibc的反汇编如下: 直接是0x67这个系统调用:103: Reading symbols from /usr/lib64/libc-2.28.so... (No debugg…

【C++】入门(一)

前言&#xff1a; 本篇博客将带大家认识C&#xff0c;熟悉基本语法 文章目录 认识CC的诞生与发展C 在行业中的运用 一、命名空间1.1 命名空间的定义1.2 命名空间的使用1.3 命名空间的访问 二、C输入&输出输出操作符 <<输入操作符 >>换行符和刷新输出缓冲区关键…

openssl3.2/test/certs - 006 - trust variants: +anyEKU -anyEKU

文章目录 openssl3.2/test/certs - 006 - trust variants: anyEKU -anyEKU概述笔记END openssl3.2/test/certs - 006 - trust variants: anyEKU -anyEKU 概述 openssl3.2 - 官方demo学习 - test - certs 笔记 // \file my_openssl_win_log_doc_006.txt // openssl3.2/test/…

跟着我学Python进阶篇:03. 面向对象(下)

往期文章 跟着我学Python基础篇&#xff1a;01.初露端倪 跟着我学Python基础篇&#xff1a;02.数字与字符串编程 跟着我学Python基础篇&#xff1a;03.选择结构 跟着我学Python基础篇&#xff1a;04.循环 跟着我学Python基础篇&#xff1a;05.函数 跟着我学Python基础篇&#…

erlang (Lists 操作模块)学习笔记

all 1> lists:all(fun(X)->X<4 end,[1,2,3]). true 2> lists:all(fun(X)->X<4 end,[1,2,3,4]). false all&#xff08;Pred&#xff0c; List&#xff09;-> boolean() 如果 Pred&#xff08;Elem&#xff09; 对 List 中的所有元素 Elem 返回 true&…

WEB前端CSS常见样式以及各种简单样式

CSS常见样式 CSS语法结构 选择器表达式{key:value;....... }margin、padding margin&#xff1a;外边距 padding&#xff1a;内边距 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>*{mar…

java实现将集合数据导入excel表格之竖向

这里使用的是apache.poi&#xff0c;当然如果使用easyExcel也可以实现 括号是EasyExcel官网&#xff08;EasyExcel官方文档 - 基于Java的Excel处理工具 | Easy Excel&#xff09; 找到填充&#xff0c;都会有相对应的demo实列 下面是我写的apache.poi实现代码 public static vo…

初学python系列: pandas操作excel

媳妇工作中经常用到excel处理&#xff0c;想用python处理excel更高效&#xff0c;所以自学了python&#xff0c;觉得python比Java还是简单多了&#xff0c;没有变量类型声明&#xff0c;比Java也就多了元组&#xff0c;各种库很丰富。 需求是&#xff1a; 汇总两个excel中 列&…

2024年 复习 HTML5+CSS3+移动web 笔记 之CSS遍

28-第三天课程介绍_哔哩哔哩_bilibili CSS 第一天 1.1 引入方式 1.2 选择器 1.3 画盒子 div 独占一行 1.4 文字控制 div 外层 1.5 调试工具 F12 1.5 综合案例 一 新闻详情 1.6 综合案例 二 CSS 简介 CSS 第二天 2.1 复合选择器 2.2 伪类选择器 2.3 CSS 特性 2.4 Emmet 写法 2.5…

JavaEE 网络原理

JavaEE 网络原理 文章目录 JavaEE 网络原理1. 网络互连1.1 局域网LAN1.2 广域网WAN 2. 网络通信基础2.1 IP地址2.2 端口号 3. 网络协议3.1 概念3.2 五元组3.3 协议分层3.4 TCP/IP 五层模型3.5 封装和分用 1. 网络互连 随着时代的发展&#xff0c;需要多个计算机协同工作来完成…

砝码法律咨询公司:创始人的智慧与团队的力量

在法律服务领域,有这样一支团队,他们以其独特的视角和专业的服务,正在逐渐改变着人们对家庭法律服务的认识。他们就是天津砝码法律咨询公司的团队,由一群对法律充满热情的专业人士组成,以其创始人的智慧为引领,致力于为家庭提供全面的法律服务。本篇新闻稿将深入介绍砝码法律的…

Pix2Pix理论与实战

本文为&#x1f517;365天深度学习训练营 中的学习记录博客 原作者&#xff1a;K同学啊|接辅导、项目定制 我的环境&#xff1a; 1.语言&#xff1a;python3.7 2.编译器&#xff1a;pycharm 3.深度学习框架Pytorch 1.8.0cu111 一、引入 在之前的学习中&#xff0c;我们知道…

Haar小波下采样模块

论文原址&#xff1a;Haar wavelet downsampling: A simple but effective downsampling module for semantic segmentation - ScienceDirect 原文代码&#xff1a;HWD/HWD.py at main apple1986/HWD (github.com) 介绍 深度卷积神经网络 &#xff08;DCNN&#xff09; 通…