DOM的事件模型和DOM事件流

DOM的事件模型

DOM事件模型包括捕获和冒泡(ie用的是事件冒泡),捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到window。是两个过程。


003xds7Kzy7eaO08TL240&690.jpeg

DOM事件流

浏览器在为这个当前页面与用户做交互的过程中,比如我点击了这个鼠标左键,这个左键是怎么传到页面上。还有怎么响应的。事件流分三个阶段,第一阶段是捕获,第二阶段是目标阶段,比如点击的这个按钮,这个按钮就是目标阶段,事件通过捕获到达目标元素,就到达了目标阶段,第三个阶段是冒泡阶段,从目标元素再上传到window对象,就是冒泡的过程。


003xds7Kzy7eaO281y868&690.png

DOM事件捕获的具体流程

事件捕获是从上到下,具体第一个真正接收的是window(对象)——第二个接收的是document(对象)——第三个接收的是html标签(怎么获取html标签>document.documentElement)——第四个接收的是body(document.body)——......(父级--子级,剩下的就是按照普通的html结构一层一层往下传)——最后到达目标元素。


003xds7Kzy7eaOxQnnCc4&690.jpeg

DOM事件冒泡的具体流程

事件冒泡的具体流程(与事件捕获正好相反):第一个接收的是目标元素——第二个接收的是...(子级--父级,按照html结构一层一层往上传)——然后接收的是body标签——html标签——document对象——最后一个接收的是window对象。

参考博客:https://www.cnblogs.com/diligenceday/p/4175721.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,581评论 1 11
  • 事件流 JavaScript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互...
    DHFE阅读 860评论 0 3
  • js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...
    道无虚阅读 2,461评论 0 2
  • JavaScript 与 HTML 之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬...
    LemonnYan阅读 707评论 0 4
  • 多年来一直以为自己是双子座AB型血的人,然而却在这次献血后破除了多年的自以为是。曾经的一个客户在聊天中曾谈及双子座...
    秋风沐雨阅读 260评论 0 4