DOM事件

作者: Yandhi233 | 来源:发表于2021-11-01 20:57 被阅读0次

DOM事件模型与事件流

DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM事件流。DOM事件流最独特的性质是,文本节点也触发事件(在IE中不会),当鼠标单击“单击此文本”文本时会触发click事件,该事件的捕获阶段最先开始,从Document节点开始逐渐向下传播,直到“单击此文本”文本节点,事件进入目标阶段,在目标阶段结束之后,事件由“单击此文本”文本节点开始事件的冒泡阶段,直到Document节点为止。

  • 事件捕获

事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目标元素的所有祖先元素依次往下传递。在这个过程中,事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获,如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理;否则,事件会被接着传递给派生元素路径上的下一元素,直至目标元素。事件到达目标元素后,它会接着通过DOM节点再进行冒泡。

  • 事件冒泡

当事件在某一DOM元素被触发时,例如用户在客户名字节点上点击鼠标,事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次,直到它遇到依附有该事件类型处理器的节点,此时,该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡,在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法,在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播,事件将一直通过DOM冒泡直至到达文档根。

  • 示意图
DOM事件流

事件绑定

div.addEventListener('click', fn, bool)

如果bool不传值或为 falsy ,则fn走冒泡阶段,即当浏览器在冒泡阶段发现 div 有 fn 监听函数,就会调用 fn,并提供事件信息;
如果bool为 true ,则让 fn 走捕获阶段,即当浏览器在捕获阶段发现 div 有 fn 监听函数,就会调用 fn,并提供事件信息。

相关文章

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

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

  • DOM事件

    DOM级别与DOM事件 DOM级别:DOM0级、DOM1级、DOM2级、DOM3级DOM事件:DOM0级事件处理、...

  • DOM事件

    DOM级别与DOM事件 DOM级别:DOM0级,DOM1级,DOM2级和DOM3级DOM事件:DOM0级事件处理,...

  • DOM0和DOM2级事件简单理解

    关于DOM0 和DOM1级事件可以简单理解为:事件分为DOM 0级事件和Dom 2级事件,DOM2级事件也叫做事件...

  • Dom事件

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

  • 3-6 DOM事件

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

  • HTML DOM 事件

    HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中...

  • 网易微专业-DOM编程艺术 05 事件

    1、DOM事件⑴主要内容▪事件流▪事件注册▪事件对象▪事件分类▪事件代理 ⑵什么是DOM事件▪点击一个DOM元素▪...

  • DOM事件类

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

  • DOM事件

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

网友评论

      本文标题:DOM事件

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