美文网首页前端基础知识
DOM的事件模型和DOM事件流

DOM的事件模型和DOM事件流

作者: 泉泉泉泉泉泉 | 来源:发表于2019-06-18 23:28 被阅读0次

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

相关文章

  • 3-6 DOM事件

    问题 DOM 事件的级别 DOM 事件模型(就是捕获和冒泡儿) DOM 事件流 描述DOM事件捕获的具体流程 Ev...

  • 深入理解DOM事件机制

    前言 本文主要介绍: DOM事件级别 DOM事件流 DOM事件模型 事件代理 Event对象常见的方法和属性 一、...

  • DOM事件类

    基本概念:DOM事件的级别 DOM事件模型 DOM事件流 描述DOM事件捕获的具体流 Event对象的常见应用 自...

  • 前端知识点之DOM 事件类

    知识点:--DOM 事件的级别--DOM 事件模型和事件流--Event 对象的常见应用--自定义事件 DOM 事...

  • 前端面试题(3)——DOM事件类

    基本概念:DOM事件的级别 DOM事件模型:事件冒泡事件捕获 DOM事件流 描述DOM事件捕获的具体流程 Even...

  • DOM事件面试题

    基本概念: DOM事件的级别 DOM事件模型image.png DOM事件流image.png什么是事件流:(分三...

  • Dom事件

    Dom事件的级别Dom事件模型(冒泡+捕获)Dom事件流 http://www.cnblogs.com/staro...

  • Dom事件

    基本概念 Dom事件级别 Dom事件模型 Dom事件流 描述Dom事件捕获的具体流程 Event对象的常见应用 自...

  • DOM事件

    DOM事件的级别 DOM事件模型 DOM事件流 描述DOM时间捕获的具体流程 Event对象的常见应用 自定义事件...

  • 前端面试准备--3.DOM事件

    DOM事件 1.基本概念:DOM事件的级别 2.DOM事件模型(冒泡捕获) 3.DOM事件流(页面中接受事件的顺序...

网友评论

    本文标题:DOM的事件模型和DOM事件流

    本文链接:https://www.haomeiwen.com/subject/emrcqctx.html