美文网首页
事件冒泡及捕捉

事件冒泡及捕捉

作者: 夜幕小草 | 来源:发表于2016-11-26 18:46 被阅读40次

IE5.5

IE5.5

IE6.0

IE6.0 Mozilal

事件捕捉:

IE使用冒泡型事件、相对的、Netscape使用了另一种称为捕获型事件(eventcapturing)的解决方案、事件的捕获和冒泡刚好相反的两种过程——捕获型事件中、事件从最不精确的对象(document对象)开始触发、然后到最精确(也可以在窗口级别捕获事件,不过必寻由开发人员特别指定)。Netscape不会将页面上的很多元素暴露给事件。继续使用前面的代码示例、事件按照下面的路径传播:

(1)document

(2) 《div》

有些人也称之为自顶向下的事件模型,因为它是从DOM层次的顶端开始向下延伸的:

事件捕捉

DOM事件流:

DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素结点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程可称为DOM事件流。事件顺序有两种类型:事件捕捉和事件冒泡。

DOM标准的事件模型

我们已经对上面两个不同的事件模型进行了解释和对比。DOM标准同时支持两种事件模型,即捕获型事件与冒泡型事件,但是,捕获型事件先发生。两种事件流都会触发DOM中的所有对象,从document对象开始,也在document对象结束(大部分兼容标准的浏览器会继续将事件是捕捉/冒泡延续到window对象)。继续使用前面的例子、在与DOM兼容的浏览器中点击

元素时、事件流的进行如下图: 捕获事件&&冒泡事件

注意因为事件的目标(元素)是最精确的元素(于是,在DOM树中最深),实际上它会接收两次事件,一次在捕获过程中,另一次在冒泡过程中。DOM事件模型的最独特的性质是,文本节点也触发事件(在IE不会)。所以如果点击示例中的点击、实际的事件流应该是:

捕获事件&&冒泡事件

相关文章

  • 事件冒泡及捕捉

    IE5.5 IE6.0 事件捕捉: IE使用冒泡型事件、相对的、Netscape使用了另一种称为捕获型事件(eve...

  • DOM Event

    DOM Event 事件流 事件流分为三个阶段:事件捕捉,目标触发,事件冒泡 事件捕捉 注册事件类型发生后,从ht...

  • 2018-11-07捕捉与冒泡

    捕捉:China——>bj——>hd冒泡:hd——>bj——>China 阻止事件行为:stopPropagati...

  • JS事件冒泡和事件捕捉

    子标签和父标签都绑定事件,点击子标签,先触发子的绑定事件,再触发父的绑定事件,叫做事件冒泡。 反之,先触发父,后触...

  • (Web) 事件冒泡和事件捕捉

    当一个事件发生在具有父元素的元素上,现代浏览器会运行两个不同的阶段,捕获阶段和冒泡阶段,二者是相反的流程。 捕获阶...

  • 事件冒泡(阻止冒泡)和事件捕捉(阻止捕获)

    很多朋友私聊问我怎么阻止事件冒泡,不懂事件冒泡和事件捕捉的童鞋看过来了,小编今天就来给大家讲解一下。 我们先来简单...

  • 事件冒泡(阻止冒泡)和事件捕捉(阻止捕获)

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

  • JavaScript事件冒泡简介及应用

    JavaScript事件冒泡简介及应用一、什么是事件冒泡在一个对象上触发某类事件(比如单击onclick事件),如...

  • 理解javascript事件流

    一个事件的生命周期包括三个阶段:捕捉 目标 冒泡 捕捉阶段 当某个事件被触发时,浏览器会找出事件涉及的元素,这个就...

  • 02-12js应用

    一:车牌号限行案例 二:属性操作 三:BOM操作 四:计时事件 五:广告轮播案例 六:事件绑定 七:事件冒泡和事件捕捉

网友评论

      本文标题:事件冒泡及捕捉

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