本文主要探讨了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中的处理流程研究的更多相关文章

  1. 谈谈JavaScript事件

    众所周知,web前端包含三个基本技术:html.css和javascript.三者融合,才让网页变得精彩纷呈!如今,web上的操作越来越趋于复杂,JavaScript事件在网页中也遍地开花,有时候也是 ...

  2. javascript事件执行流程分析

    我一直想搞清楚事件在DOM中的传播方式,今天经高人指点终于明白一二.首先扒了一张图: 事件捕获过程:当我们点击TEXT时,首先是window->document->body->div ...

  3. webkit中DOM 事件有多少

    webkit中DOM 事件有多少 目前客户端javascript中大量的工作就是处理浏览器,用户触发的各种事件,下面是webkit中这些事件的集合,有一些时常见的,标准规定的,而另一些则是webkit ...

  4. popstate事件在低版本webkit中的调用

    popstate是H5的history系列中的事件,但是在低版本的webkit中会自动触发.H5中的history api是不会使页面发生跳转的,只是操作地址栏和响应的state属性而已,而且是手动操 ...

  5. 浏览器中的JavaScript事件循环机制

    浏览器的事件循环机制是HTML中定义的规范. JavaScript有一个主线程和调用栈,所有的任务都会被放到调用栈等待主线程执行. JS调用栈 是一种先进后出的数据结构.当函数被调用时,会被添加到栈中 ...

  6. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  7. JavaScript事件详解-jQuery的事件实现（三）

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  8. Javascript事件模型系列（一）事件及事件的三种模型

    一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...

  9. 深入理解JavaScript 事件

    本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加了各种例子及解析. 如无特殊说明,本 ...

随机推荐

  1. 在 IBM RAD 平台上基于 JAX-WS 开发 Web Services服务器端，客户端

    原文地址:https://www.ibm.com/developerworks/cn/websphere/library/techarticles/1305_jiangpl_rad/1305_jian ...

  2. 第0章Linux环境到内核基础知识

    #include<stdio.h> int main(void) { printf("hello world\n"); return 0; } gcc -g -wall ...

  3. 【Linux】多进程与多线程之间的区别

    http://blog.csdn.net/byrsongqq/article/details/6339240 网络编程中设计并发服务器,使用多进程与多线程 ,请问有什么区别?  答案一: 1,进程:子 ...

  4. Codeforces 599E Sandy and Nuts（状压DP）

    题目链接 Sandy and Nuts 题意大概就是给出限制条件求出在该限制条件下树的种数. #include <bits/stdc++.h> using namespace std; # ...

  5. Widows下利用OpenSSL生成证书

    1.下载OpenSSL的windows版本 32位:openssl-1.0.2a-i386-win32.zip 64位:openssl-1.0.2a-x64_86-win64.zip 下载之后解压即可 ...

  6. Codeforces Round #321 (Div. 2) Kefa and Dishes 状压+spfa

    原题链接:http://codeforces.com/contest/580/problem/D 题意: 给你一些一个有向图,求不超过m步的情况下,能获得的最大权值和是多少,点不能重复走. 题解: 令 ...

  7. HDU 2460 Network 傻逼Tarjan

    Network Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  8. Java中将List转成逗号数组的方案

    说明:逗号字符串转成数组或者List都是可以的,反过来依然可行:但是如果是List<String>转List<Integer>,基本误解,在Java 7只能for循环,如果在J ...

  9. [NSThread sleepForTimeInterval:3.0];

    在- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)laun ...

  10. Scut游戏服务器免费开源框架--快速开发（1）

    Scut快速开发(1) 1        开发环境 需要安装的软件 a)        VS2010开发工具(.Net Framework 4.0以上) 2        HelloWorld 2.1 ...