`
jiagou
  • 浏览: 2516456 次
文章分类
社区版块
存档分类
最新评论

webkit dom 事件分析

 
阅读更多

webkit dom事件分析

Dom事件模型可以分为dom0 和dom2两种事件模型,所以支持JavaScript的浏览器都都会支持dom0事件模型,DOM2定义了高级的事件处理API,和DOM0的API相比,有着令人瞩目的不同(而且功能更强大).虽然DOM2标准并没有把已有的API收入其中,但是DOM0级API也没有被去除.对于基本的事件处理任务,你会觉得使用这些简单的API更自由一些.

DOM2事件模型被除了IE以外的所有浏览器支持。

webkit在这部分的设计中,较好的这两种事件模型统一了起来,在注册的部分,稍有不同,我们知道,dom0的事件监听器是通过html属性注册,而dom2是通过类似ja elem.addEventListener()的方式,下面是一个相关的类图。

EventTarget直接依赖于EventListener,EventListener是一个抽象类,然后具体的监听器在下面派生,注意,JSEventListener,以及JSLazeEventListener是与具体的js解释引擎有关系的。那么事件监听器的注册的流程是怎么样的了?下面以body的onload为例进行说明。

DOMWindow中,addEventListener的实现如下:

  1. boolDOMWindow::addEventListener(constAtomicString&eventType,PassRefPtr<EventListener>listener,booluseCapture)
  2. {
  3. if(!EventTarget::addEventListener(eventType,listener,useCapture))
  4. returnfalse;
  5. if(Document*document=this->document())
  6. document->addListenerTypeIfNeeded(eventType);
  7. if(eventType==eventNames().unloadEvent)
  8. addUnloadEventListener(this);
  9. elseif(eventType==eventNames().beforeunloadEvent&&allowsBeforeUnloadListeners(this))
  10. addBeforeUnloadEventListener(this);
  11. #ifENABLE(DEVICE_ORIENTATION)
  12. elseif(eventType==eventNames().devicemotionEvent&&frame()&&frame()->page()&&frame()->page()->deviceMotionController())
  13. frame()->page()->deviceMotionController()->addListener(this);
  14. elseif(eventType==eventNames().deviceorientationEvent&&frame()&&frame()->page()&&frame()->page()->deviceOrientationController())
  15. frame()->page()->deviceOrientationController()->addListener(this);
  16. #endif
  17. returntrue;
  18. }

webkit dom事件分析

Dom事件模型可以分为dom0 和dom2两种事件模型,所以支持JavaScript的浏览器都都会支持dom0事件模型,DOM2定义了高级的事件处理API,和DOM0的API相比,有着令人瞩目的不同(而且功能更强大).虽然DOM2标准并没有把已有的API收入其中,但是DOM0级API也没有被去除.对于基本的事件处理任务,你会觉得使用这些简单的API更自由一些.

DOM2事件模型被除了IE以外的所有浏览器支持。

webkit在这部分的设计中,较好的这两种事件模型统一了起来,在注册的部分,稍有不同,我们知道,dom0的事件监听器是通过html属性注册,而dom2是通过类似ja elem.addEventListener()的方式,下面是一个相关的类图。

EventTarget直接依赖于EventListener,EventListener是一个抽象类,然后具体的监听器在下面派生,注意,JSEventListener,以及JSLazeEventListener是与具体的js解释引擎有关系的。那么事件监听器的注册的流程是怎么样的了?下面以body的onload为例进行说明。

DOMWindow中,addEventListener的实现如下:

  1. boolDOMWindow::addEventListener(constAtomicString&eventType,PassRefPtr<EventListener>listener,booluseCapture)
  2. {
  3. if(!EventTarget::addEventListener(eventType,listener,useCapture))
  4. returnfalse;
  5. if(Document*document=this->document())
  6. document->addListenerTypeIfNeeded(eventType);
  7. if(eventType==eventNames().unloadEvent)
  8. addUnloadEventListener(this);
  9. elseif(eventType==eventNames().beforeunloadEvent&&allowsBeforeUnloadListeners(this))
  10. addBeforeUnloadEventListener(this);
  11. #ifENABLE(DEVICE_ORIENTATION)
  12. elseif(eventType==eventNames().devicemotionEvent&&frame()&&frame()->page()&&frame()->page()->deviceMotionController())
  13. frame()->page()->deviceMotionController()->addListener(this);
  14. elseif(eventType==eventNames().deviceorientationEvent&&frame()&&frame()->page()&&frame()->page()->deviceOrientationController())
  15. frame()->page()->deviceOrientationController()->addListener(this);
  16. #endif
  17. returntrue;
  18. }

分享到:
评论

相关推荐

    WebKit分析报告2

    VI.WebKit之DOM分析 47 一.DOM原理 47 1.DocView 模型 47 2.抽象网页表示 49 3.DOM解析基本算法 52 二.WebKit DOM代码解析流程 57 VII.WebKit之布局分析 57 一.基本概念 57 1.CSS布局相关标准介绍 58 2.布局页面的...

    webkit研究报告

    I.WebKit 介绍 II.WebKit 之WebCore 介绍 III.WebKit 之Port 介绍 IV.WebKit 之图形库介绍 V.WebKit 之网络库介绍 VI.WebKit 之DOM 分析 VII.WebKit 之布局分析

    webkit研究报告(2)

    该报告由中兴公司的某个工程师所写 大纲: webkit介绍 port介绍 webcore介绍 图形库介绍 网络库介绍 Dom分析 布局分析 总共98页

    信息安全_WEB流量监控防御系统.pptx

    工作原理 部署方式 桥模式、反向代理模式、单臂模式 关键技术及实现原理 数据捕获、IP碎片重组、TCP流重组、过滤、 会话阻断、审计、报警 下一步发展 Web 爬虫 ...与QT WebKit的DOM XSS检测思想大同小异。

    chrome-react插件-React Developer Tools

    Chrome调试模式下,可视化的React DOM结构实时分析 React Developer Tools is a Chrome extension that allows you to inspect the React component hierarchy in the Chrome Developer Tools (formerly WebKit Web ...

    浅谈CSS到底会不会阻塞页面渲染

    接下来,我们就一起来分析一下。 原理解析 那么为什么会出现上面的现象呢?我们从浏览器的渲染过程来解析下。 不同的浏览器使用的内核不同,所以他们的渲染过程也是不一样的。目前主要有两个 webkit渲染过程 Gecko...

    phantomjs:可编写脚本的无头浏览器

    可脚本的无头WebKit PhantomJS( )是可使用JavaScript编写的无头WebKit。 最新的是2.1版。 重要提示:PhantomJS开发将暂停,直到另行通知(有关更多详细信息,请参阅 )。用例无头Web测试。 无需浏览器即可进行闪电...

    javascript的理解及经典案例分析

    js的简介: JavaScript是一种能让你的网页更加生动活泼的程式语言,也是目前网页中设计中最容易学又最方便的语言。 你可以利用JavaScript轻易的...比如node.js等等,再比如一些桌面引擎node-webkit可以将JavaScript渲染

    NativeInspector:适用于 Android V8 调试服务器的 Web Inspector 的 Cleanroom 实现

    游戏关闭本机检查器 概述 GameClosure Native Inspector 是一个 node.js 项目,它提供: JavaScript 调试 ...与设备通信时,使用,这是完整 WebKit 调试协议(包括 DOM 等)的一个非常有限的子集。 NativeI

    编程狂人第十二期

    斯坦福大学发布免费在线文本分析工具 Parse发布Bolts,一个面向iOS和Android的底层库集合 9 款最好的基于 Rails 的 CMS 内容管理系统 开源世界应该致谢的五家公司 Square、LinkedIn、Google、Facebook... 游戏公司的...

    CSS3的颜色渐变效果的示例代码

    在animate.css寻找自己想要的动态效果,看到标题Animate.css和按钮Animate it的颜色在逐渐变化,觉得蛮有趣的,把控制变化的相关代码扒了下来,自己分析实现一波。 一开始认为使用了js控制颜色逐渐变化,看了看js...

Global site tag (gtag.js) - Google Analytics