首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

事件冒泡和传播

举栗子 事件输出hello world 事件有两种,一种为事件传播,一种是事件冒泡 事件传播事件冒泡 这还要从遥远的荒诞说起,两家网景和ie,为了能争夺市场,互相使用相反的技术,当网景使用事件传播的时候...(两个正好相反)这个时候w3c来了,为了能规范规定,直接取折中,当事件发生时,先发生向下传播,当到底了以后再次使用事件冒泡,逐渐的冒泡到顶层window DOM为一个完整的树 使用事件传播输出hello...否则为事件传播 冒泡为上,事件传播为下,事件传播优于事件冒泡 [15.gif] 可以明确的知道,此时为false为冒泡,即全部向上传播,这个比较简单不在阐述 阻止进一步冒泡 // 获取元素 var div1...你点击的是内框"); event.stopPropagation(); // 阻止该事件进一步传播 }, false); div3.addEventListener('click', () => {...,为向下,且传播优先于冒泡 并且事件先进行向上传,直到遇到设置为冒泡的元素的时候,停止向上传,开始进行从上到下的捕获,先最外层捕获,然后逐层捕获,直到完成。

84960

DOM事件传播机制

引言--DOM事件传播机制是指当一个事件在DOM树中触发时,它是如何在各个元素之间传播的。DOM事件传播机制分为三个阶段:捕获阶段、目标阶段和冒泡阶段。...在DOM中,事件是指用户与页面交互时发生的动作,比如点击、鼠标移动等。而事件流则是指这些事件在DOM树中传播的路径。...标准 DOM 事件流DOM事件流是指在DOM树中,事件从最外层的节点开始传播,逐级向下,直到达到目标节点,然后再从目标节点向上传播到最外层的节点。...总结起来,DOM事件流就是指从最外层的节点开始传播,逐级向下到达目标节点,然后再从目标节点向上传播到最外层的节点的过程。这个过程分为捕获阶段、目标阶段和冒泡阶段。...事件冒泡流事件冒泡是指在DOM树中,事件从目标元素开始向上冒泡传播的过程。也就是说,在冒泡阶段,事件会依次触发父级元素的相同类型事件处理程序。

13230
您找到你想要的搜索结果了吗?
是的
没有找到

前端学习(51)~事件传播事件冒泡

DOM事件事件传播的三个阶段是:事件捕获、事件冒泡和目标。 事件捕获阶段:事件从祖先元素往子元素查找(DOM树结构),直到捕获到事件目标 target。...在这个过程中,默认情况下,事件相应的监听函数是不会被触发的。 事件目标:当到达目标元素之后,执行目标元素该事件相应的处理函数。如果没有绑定监听函数,那就不执行。...事件冒泡阶段:事件事件目标 target 开始,从子元素往冒泡祖先元素冒泡,直到页面的最上一级标签。...事件冒泡 事件冒泡: 当一个元素上的事件被触发的时候(比如说鼠标点击了一个按钮),同样的事件将会在那个元素的所有祖先元素中被触发。...这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。 通俗来讲,冒泡指的是:子元素的事件被触发时,父元素的同样的事件也会被触发。取消冒泡就是取消这种机制。

90820

Event(事件)的传播与冒泡

特性说明和原理图: 标准浏览器和Ie9+浏览器都支持事件的冒泡和捕获,而IE8-浏览器只支持冒泡 标准和Ie9+浏览器用stopPropagation()或cancelBubble阻止事件传播,而ie8...Ie8-用attachEvent为dom元素添加一个事件,但必须在事件名前加上on,此类事件只能在元素的冒泡阶段。...stopPropagatin()方法用于阻止事件传播,如果设置在捕获阶段,则目标和冒泡阶段不会被执行; cancelBubble属性只能阻止冒泡阶段,对捕获和目标阶段的事件不能阻止 preventDefault...body.append( String.fromCharCode( event.keyCode )); }); }); 实现一个完整的event流的Demo 在cont的捕获事件处有阻止事件传播的代码...阻止默认事件只用于验证 应用场景 捕获阶段的事件应用场景较少,一般情况下都应用在目标和冒泡阶段。

1.1K90

今天聊聊DOM事件传播机制

事件冒泡流 IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。... DOM 树向上传播,在每一级节点上都会发生,按照如下顺序进行传播: div body html document 所有现代浏览器都支持事件冒泡,但在具体实现在还是有一些差别。...,document 对象首先接收到 click 事件,然后事件沿 DOM 树依次向下,一直传播事件的实际目标,即 div 元素: document html body div IE9、Firefox、...处于目标阶段:事件在 div 上发生并处理,但是本次事件处理会被看成是冒泡阶段的一部分。 冒泡阶段:事件传播回文档。 事件委托 上面介绍了事件冒泡流,事件冒泡一个最大的好处就是可以实现事件委托。...事件冒泡(event bubbling),是指事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。

95020

深入理解JavaScript中的事件传播机制:事件冒泡和事件捕获

前言在JavaScript中,事件冒泡和事件捕获是两种不同的事件传播方式。当一个事件被触发时,它会从最内层的元素开始,然后逐级向外传播,直到最外层的元素。...这是因为事件从文档的最外层开始向内传播,然后经过外部div、内部div和按钮,直到它到达按钮。事件冒泡和事件捕获的区别事件冒泡和事件捕获的主要区别在于它们的传播方向。...该方法接受三个参数:事件类型、事件处理程序和一个可选的布尔值,用于指定事件传播方式。如果该值为true,则事件使用事件捕获传播方式;如果该值为false或未指定,则事件使用事件冒泡传播方式。...这是因为事件从文档的最外层开始向内传播,然后经过外部div、内部div和按钮,直到它到达按钮。结论在JavaScript中,事件冒泡和事件捕获是两种不同的事件传播方式。...事件冒泡从最内层的元素开始向外传播,而事件捕获从最外层的元素开始向内传播。你可以使用addEventListener()方法来注册事件处理程序,并指定事件传播方式。

47021

浅谈JCenter即将被停止服务的事件

这么重大的事件也是相当出乎我意料,本来我以为是Google又要整什么幺蛾子,因为Google很喜欢废弃东西。结果了解下来,Google这次也是受害者。...接下来我来跟大家具体介绍一下JCenter的停止服务会带来哪些影响,以及这些影响生效的时间节点。 毫无疑问,JCenter的停止服务势必会影响两类人群:开源库的开发者和开源库的使用者。...我认为现在能做的事情还不太多,因为整个事件当中,还有一位非常核心的玩家没有表态,那就是Google。...刚才说了,Google也是这次事件的受害者,本来Android Studio创建项目时默认集成JCenter仓库,我还以为Google是和JFrog建立了战略合作关系。...我就在寻思着,Google会不会有计划自建一个第三方开源项目的仓库,从而不用再担心这种突然被停止服务的困扰。

1.7K21

日志分析之某网站weblogic服务停止事件分析

某网站出现weblogic多次服务停止事件,时间分别为:(2018年1月2日:9点、14点、15点。1月3日:9点、14点,具体时间无)。 2....网站方提供恶意代码附件”恶意代码.txt”,该恶意代码执行后导致weblogic停止。 3....一、确定事件输入点 根据“点线面”模型里的流程,在确定事件输入点时我们需要清楚三点:1.异常是什么,2.产生异常涉及的系统是哪些(ip,业务,开放的服务,系统类型),3.这些受害主机产生异常的原因是什么...服务停止。...由于已知的最早一次服务停止事件发生在2018年1月2日,发现从2017/12/8 6:00:34起持续存在CVE-2017-5638漏洞告警,该漏洞属于Apache Struts 2远程命令执行漏洞,恶意用户可在上传文件时通过修改

1.2K20

借助 Pod 删除事件传播实现 Pod 摘流

理想情况下,我们希望 Pod 在启动关闭后立即停止接收流量。为了减轻这种情况,我们必须首先了解为什么会发生Pod开始关闭时仍然会接收到新流量这个问题。...但是,上篇文章里我们没有谈论到的是,如何从上层的 Service 控制器中注销 Pod,使得 Pod 能停止接收流量。...译注:我的理解是要在Pod真正停止运行前,要先把它从Service上拿掉,也就是摘流。 那么,是什么情况会导致 Pod 从 Service 中注销掉呢?...是否要无限期地等待事件传播?如果该节点重新恢复联机怎么办?如果你的Kubernetes 集群有成千上万个节点怎么办? 不幸的是,现实情况是并不存在防止所有中断的完美解决方案。...这将会发送一个Pod deletion 事件,该事件会同时通知给 kubelet 和 Endpoint Controller(端点控制器,这里指的是 Pod 上层的 Service控制器)。

1.1K20

js addEventListener事件捕获与冒泡,第三个参数详解,阻止事件传播

结论 element.addEventListener(event, function[, useCapture]) event:事件名称,如click function:指定要事件触发时执行的函数,可以传入事件参数...布尔值,指定事件是否在捕获或冒泡阶段执行。...默认false:在冒泡阶段执行指定事件 true:在捕获阶段执行事件 event.stopPropagation():阻止事件传播,用于function(event){}中 图解捕获与冒泡 实例:aa...当js修改为 function print(e){ e.stopPropagation();//执行完此函数后,该事件不再继续传播 console.log(this.id);...cc.addEventListener('click',print,true); 再点击cc时,捕获cc,执行cc的click函数, 因为print函数中有e.stopPropagation(),所以执行完该函数后,click事件不再传播

2.6K10

js 停止事件冒泡 阻止浏览器的默认行为

在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。...浏览器默认行为: 在form中按回车键就会提交表单;单击鼠标右键就会弹出context menu. a标签 1..停止事件冒泡 JavaScript代码 1 //如果提供了事件对象,则这是一个非IE浏览器...return false; } 但是在使用return false时必须注意: 1、jQuery有自己的事件处理层,也对处理程序做了封装,如果事件处理程序返回false,事件冒泡和浏览器默认事件都会被阻止...2、使用原生javaScript,在事件处理程序中返回false只会阻止浏览器默认行为,而事件冒泡依然存在。 3、浏览器默认行为和事件冒泡是相互独立的。阻止事件冒泡不会影响默认行为,反之亦然。...事件处理程序中无法取消的。

5.2K120

《现代Javascript高级教程》深入理解事件处理和传播机制

现代JavaScript高级小册 深入浅出Dart 现代TypeScript高级小册 JavaScript事件流:深入理解事件处理和传播机制 引言 JavaScript中的事件流是一种机制,用于描述和处理事件在...DOM树中的传播过程。...DOM3级事件规范定义了新的事件类型,如滚动事件、触摸事件、过渡事件等,以及一些新的事件属性和方法,提供更丰富的事件处理能力。...事件流的属性 事件流涉及到三个主要的概念:事件捕获阶段、目标阶段和事件冒泡阶段。了解这些阶段和相关的属性对于理解事件流的机制至关重要。...2.1 事件捕获阶段 事件捕获阶段是事件流的第一个阶段,从根节点开始向下传播到目标元素。在事件捕获阶段中,事件依次经过每个父元素,直到达到目标元素。

18140
领券