资讯专栏INFORMATION COLUMN

JavaScript 事件传播

widuu / 768人阅读

摘要:当一个事件触发了之后,它会在父子元素之间进行传播。控制台输出信息从上述的例子中,我们可以看到捕获阶段和冒泡阶段事件传播的方向

当一个事件触发了之后,它会在父、子元素之间进行传播。
一、 事件传播的三个阶段
捕获阶段:从window对象一直传播到目标节点
目标阶段:在目标节点上触发事件
冒泡阶段:从目标阶段冒泡回window对象

JavaScript中的事件流是指事件触发的顺序,事件传播有两种方式,分别是事件冒泡和事件捕获。

二、 在HTML元素节点上添加事件监听函数
用addEventListener给节点添加监听函数,代码如下。

点击触发事件


当参数设为false时,表示只在冒泡阶段监听,所以当事件从p标签向上冒泡到div标签时,会在两个节点上分别触发一次click事件。控制台输出信息:

当参数设为true时,表示在捕获阶段监听。控制台输出信息:

从上述的例子中,我们可以看到捕获阶段和冒泡阶段事件传播的方向

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98152.html

相关文章

  • JavaScript-浅谈DOM事件

    摘要:事件流指的是从页面接收事件的顺序。级事件规定方法的第三个参数设为,表示事件在捕获阶段触发。目前支持事件捕获流的浏览器有,,,,。事件流根据级事件规定,事件流应该包括三个阶段,事件捕获阶段,处于目标阶段和事件冒泡阶段。 什么是事件?(敲黑板) 事件,就是文档或浏览器窗口发生的一些特定的交互瞬间。(by 《JavaScript高级程序设计》)比如鼠标点击,双击,滚动条滑动... 什么是事件...

    haitiancoder 评论0 收藏0
  • #Javascript# 事件传播机制

    摘要:当前元素的某个事件行为被触发,它所有的祖先元素,相关的事件行为也会被依次触发,顺序是从内向外。如果祖先元素的这个行为绑定了方法,绑定的方法也会被触发执行,我们把事件的这种传播机制叫做冒泡传播这个传播机制是所有浏览器的传播机制。 document.body.onclick = function(){ console.log(body); } outer.onclick = ...

    Maxiye 评论0 收藏0
  • 你不知道的javascript事件

    摘要:然而和分别提出了完全相反的的概念事件冒泡和事件捕获。所有的节点中包含了这两个方法,它们都接受个参数要处理的事件名作为事件处理程序的函数和一个布尔值。事件流级事件规定的事件流包括三个阶段事件捕获阶段处于目标阶段事件冒泡阶段。 事件流描述的是从页面中接受事件的顺序。然而ie和netscape分别提出了完全相反的的概念:事件冒泡和事件捕获。下面就说说这两种事件流: 事件冒泡 事件冒泡,就是说...

    imtianx 评论0 收藏0
  • 你不知道的javascript事件

    摘要:然而和分别提出了完全相反的的概念事件冒泡和事件捕获。所有的节点中包含了这两个方法,它们都接受个参数要处理的事件名作为事件处理程序的函数和一个布尔值。事件流级事件规定的事件流包括三个阶段事件捕获阶段处于目标阶段事件冒泡阶段。 事件流描述的是从页面中接受事件的顺序。然而ie和netscape分别提出了完全相反的的概念:事件冒泡和事件捕获。下面就说说这两种事件流: 事件冒泡 事件冒泡,就是说...

    marek 评论0 收藏0
  • JavaScript捕获和冒泡探讨

    摘要:上个星期在微博中一个关于捕获和冒泡代码的讨论,可能没有动手实现一篇的人无法给出确定的答案。目标阶段事件对象到达其事件目标。在此阶段注册的事件监听器会对相应的冒泡事件进行处理。 上个星期在微博中一个关于javascript捕获和冒泡代码的讨论,可能没有动手实现一篇的人无法给出确定的答案。 这里再来回顾一下之前的三条微博。 事件的执行顺序 JavaScript冒泡和捕获考察题目看图回答问题...

    caikeal 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<