本文主要探讨了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. ACM程序设计选修课——1018: Common Subsequence（DP）

    问题 L: Common Subsequence 时间限制: 1 Sec  内存限制: 32 MB 提交: 70  解决: 40 [提交][状态][讨论版] 题目描述 A subsequence of ...

  2. 标准C程序设计七---112

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  3. Charger Warning Message

    使用 PMIC_RGS_VCDT_HV_DET 判斷 charger 是否有 ovp. LV_VTH : 4.15V

  4. PHP基础知识练习

    1 . PHP 指的是?(C ) A.Private Home Page B.Personal Hypertext Processor C.PHP: Hypertext Preprocessor D. ...

  5. 关于[WinError 10054] 远程主机强迫关闭了一个现有的连接。

    之前一直用python实现qq邮箱自动发送,都弄的好好的,然后今天一打开,就出现如题的错误,百度了许多,说,可能发送邮件次数过多,被当作是攻击,建议换个邮箱,换了也不行, 最后用手机给电脑分享Wifi ...

  6. lodash常用

    1) Loop for N times // 1. Basic for loop. for(var i = 0; i < 5; i++) { // .... } // 2. Using Arra ...

  7. sql server 博客

    http://blog.csdn.net/tjvictor/article/category/531421/1 http://blog.csdn.net/zhangqidashu/article/de ...

  8. [Android] 环境配置之Android Studio开发NDK

    分类:Android环境搭建 (14351)  (20) ========================================================作者:qiujuer博客:bl ...

  9. 【spring data jpa】使用spring data jpa时，关于service层一个方法中进行【删除】和【插入】两种操作在同一个事务内处理

    场景: 现在有这么一个情况,就是在service中提供的一个方法是先将符合条件的数据全部删除,然后再将新的条件全部插入数据库中 这个场景需要保证service中执行两步 1.删除 2.插入 这两步自然 ...

  10. Java并发学习 & Executor学习 & 异常逃逸 & 同步互斥Best Practice & wait/notify, conditon#await/signal

    看了这篇文章:http://www.ciaoshen.com/2016/10/28/tij4-21/ 有一些Java并发的内容,另外查了一些资料. 朴素的Thread 首先,Java中关于线程Thre ...