JavaScript事件在WebKit中的处理流程研究
本文主要探讨了JavaScript事件在WebKit中的注冊和触发机制。
JS事件有两种注冊方式： 通过DOM节点的属性加入或者通过node.addEventListener()函数注冊；
通过DOM节点的属性加入例如以下所看到的，节点的属性採用on后面紧接event name的形式，比方onclick, onload;
<html>
<head>
<script type="text/javascript">
function listener(e){
alert("hello world!");
}
</script>
</head>
<body>
<button onclick="listener(event)">click</button>
</body>
</html>
通过addEventListener()函数注冊的形式例如以下, 其完整的形式是：target.addEventListener(type, listener[, useCapture]);当中type为事件类型，listener为响应函数，
useCapture表示是否在capture阶段触发，假设不指定，则为false;
<div>
<button id="button">button</button>
<script type="text/javascript">
document.getElementById('button').addEventListener("click", listener);
</script>
</div>
WebKit中事件相关的类关系如上图所看到的：
1. EventTargetDatatMap: 全局映射表，建立了Node与EventTargetData之间的映射关系 ；
2. EventTargetData: 成员变量firingEventIterators是Vector, 用于记录正在触发的事件类型，当该Vector非空时。也表示当前正处于firing阶段。 成员变量eventListenerMap是EventlListenerMap类型；
3. EventlListenerMap:按事件类型分类保存了EventListeners; 成员变量m_entires是Vector。当中每一项能够简化为std::pair<EventType, EventListenerVector>类型；
4. JSLazyEventListener: 终于响应事件触发的对象。 保存了JS运行的基本信息（源代码或者JSObject类型的函数对象）；
第一种情况下，開始事件注冊的时机是发生在页面解析阶段，当创建了button元素以后。解析到onclick属性时，会依据属性值创建相应的EventListener; 这样的情况下的EventListener仅保存了JS源代码（还没有转换成JSC虚拟机内部的函数对象), 并将EventListener加入到全局Hash表中。
另外一种情况下，JS在虚拟机中运行到”addEventListener()"时。会依据JSBindings建立的映射关系，终于调用到WebCore中的native实现Node::addEventListener(), 该函数会依据虚拟机中传递过来的函数对象创建EventListener。并在全局Hash表中建立起target node与EventListener(即这里的button)的映射关系；
下图是两种情况下，事件注冊的流程对照：
事件触发流程有下面几个步骤：
1. 找到响应事件的target node： 假设是用户交互事件，通过Hit Test算法确定； 假设是浏览器内部生成的事件，一般有固定的响应节点。比方load事件的target node是body节点；
2. 事件分发：事件在document与target之间依照(capture, at_target, bubble)的顺序进行分发，capture依照从根节点document到子节点target的路径，而bubble则相反；
3. 事件响应：分发流程中，假设事件分发到的当前节点注冊了该类型的事件，而且useCapure与事件的分发的顺序一致（即capture阶段时。当前节点注冊了useCapture == true的事件）。 则进行事件响应； 事件响应分成两步： (1) 从全局映射表中找到当前node相应的EventListeners；（2）将EventListeners封装的JS(源代码或者JSC的函数对象）抛到JS虚拟机中运行（下图是mouseup事件的触发时序）：
如前所述。属性中注冊的事件在EventListener中仅保存了源代码。所以開始运行之前会对源代码进行必要的转换。格式化成例如以下形式：
"(function(event) {listener(event)\n})"
简单来讲，事件注冊是建立node与响应函数的映射关系的过程 ，这样的映射关系基于事件类型进行分类。 而事件触发则是基于这样的映射关系，在不同阶段（capture, bubble)响应注冊函数的过程。
（转载请注明出处：http://blog.csdn.net/codigger/article/details/40620721）
JavaScript事件在WebKit中的处理流程研究的更多相关文章
- 谈谈JavaScript事件
众所周知,web前端包含三个基本技术:html.css和javascript.三者融合,才让网页变得精彩纷呈!如今,web上的操作越来越趋于复杂,JavaScript事件在网页中也遍地开花,有时候也是 ...
- javascript事件执行流程分析
我一直想搞清楚事件在DOM中的传播方式,今天经高人指点终于明白一二.首先扒了一张图: 事件捕获过程:当我们点击TEXT时,首先是window->document->body->div ...
- webkit中DOM 事件有多少
webkit中DOM 事件有多少 目前客户端javascript中大量的工作就是处理浏览器,用户触发的各种事件,下面是webkit中这些事件的集合,有一些时常见的,标准规定的,而另一些则是webkit ...
- popstate事件在低版本webkit中的调用
popstate是H5的history系列中的事件,但是在低版本的webkit中会自动触发.H5中的history api是不会使页面发生跳转的,只是操作地址栏和响应的state属性而已,而且是手动操 ...
- 浏览器中的JavaScript事件循环机制
浏览器的事件循环机制是HTML中定义的规范. JavaScript有一个主线程和调用栈,所有的任务都会被放到调用栈等待主线程执行. JS调用栈 是一种先进后出的数据结构.当函数被调用时,会被添加到栈中 ...
- 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- JavaScript事件详解-jQuery的事件实现（三）
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- Javascript事件模型系列（一）事件及事件的三种模型
一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...
- 深入理解JavaScript 事件
本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加了各种例子及解析. 如无特殊说明,本 ...
随机推荐
- win10经验总结
1.修改win10 桌面图标快捷方式路径 C:\Users\qbfe\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\System Tool ...
- 使用Matlab实现对图片的缩放
在做图像处理的时候,有时需要对图片的像素进行放大或则缩小. 使用Matlab很容易实现对图像的放大和缩小.这里只讲缩放到固定像素的方法. clear; clc; %清除以前的数据 folderName ...
- python 命令行传入参数
创建 test.py 文件,代码如下: #!/usr/bin/python # -*- coding: gbk -*- import sys print sys.argv if __name__==' ...
- linux监控平台搭建-内存
linux监控平台搭建-内存 上一篇文章说的硬盘.就写一下.更加重要的东西.在手机上面是RAM.机器是memory.内存是按照字节编址.每个地址的存储单元可以存放8bit的数据.cpu 通过内存地址获 ...
- fzu 1753 质因数的应用
Another Easy Problem Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64 ...
- Docker 架构详解
Docker 的核心组件包括: Docker 客户端 - Client Docker 服务器 - Docker daemon Docker 镜像 - Image Registry Docker 容器 ...
- 手动创建DataTable并绑定gridview
原文发布时间为:2008-08-04 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...
- Linux Malloc分析-从用户空间到内核空间【转】
转自:http://blog.csdn.net/ordeder/article/details/41654509 版权声明:本文为博主(http://blog.csdn.net/ordeder)原创文 ...
- 在 POSIX 线程编程中避免内存泄漏
检测和避免 POSIX 线程内存泄漏的技巧 POSIX 线程(pthread)编程定义了一套标准的 C 编程语言类型.函数和常量 — 且 pthreads 提供了一种强大的线程管理工具.要充分使用 p ...
- 数据结构自己实现——queue
SeqQueue.h #define QueueSize 100 typedef char DataType; class SeqQueue { public: DataType data[Queue ...