DOM事件

作者: Sharpe | 来源:发表于2020-05-28 00:21 被阅读0次

DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件。

事件冒泡(dubbed bubbling):与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点。

无论是事件捕获还是事件冒泡,它们都有一个共同的行为,就是事件传播,它就像一跟引线,只有通过引线才能将绑在引线上的鞭炮(事件监听器)引爆,试想一下,如果引线不导火了,那鞭炮就只有一响了!!!

dom标准事件流的触发的先后顺序为:先捕获再冒泡,即当触发dom事件时,会先进行事件捕获,捕获到事件源之后通过事件传播进行事件冒泡。不同的浏览器对此有着不同的实现,IE10及以下不支持捕获型事件,所以就少了一个事件捕获阶段,IE11、Chrome 、Firefox、Safari等浏览器则同时存在。

说到事件冒泡与捕获就不得不提一下两个用于事件绑定的方法addEventListener、attachEvent。当然还有其它的事件绑定的方式这里不做介绍。

addEventListener(event, listener, useCapture)

·参数定义:event---(事件名称,如click,不带on),listener---事件监听函数,useCapture---是否采用事件捕获进行事件捕捉,

默认为false,即采用事件冒泡方式

addEventListener在 IE11、Chrome 、Firefox、Safari等浏览器都得到支持。

attachEvent(event,listener)

·参数定义:event---(事件名称,如onclick,带on),listener---事件监听函数。

attachEvent主要用于IE浏览器,并且仅在IE10及以下才支持,IE11已经废了这个方法了(微软还是挺识趣的,慢慢向标准靠拢)。

相关文章

  • 前端面试题(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/rxbnahtx.html