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

为什么这两个对addEventListener的javascript调用会有不同的结果

这两个对addEventListener的JavaScript调用会有不同的结果,是因为它们在事件监听的阶段上存在差异。

第一个调用是使用冒泡阶段(bubbling phase)进行事件监听的,而第二个调用是使用捕获阶段(capturing phase)进行事件监听的。

事件流包括三个阶段:捕获阶段、目标阶段和冒泡阶段。在捕获阶段,事件从最外层的元素向目标元素传递;在目标阶段,事件到达目标元素;在冒泡阶段,事件从目标元素向最外层的元素传递。

当调用addEventListener时,第三个参数可以指定事件监听的阶段,默认为冒泡阶段。如果将第三个参数设置为true,则事件监听将在捕获阶段进行;如果将第三个参数设置为false或省略,则事件监听将在冒泡阶段进行。

因此,第一个调用会在冒泡阶段进行事件监听,而第二个调用会在捕获阶段进行事件监听。这会导致它们在事件触发时的顺序不同,可能会影响到事件处理的结果。

推荐的腾讯云相关产品和产品介绍链接地址:

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求进行评估。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

为什么RGB 与 CMYK差异,会有不同

这只是简单区别。如果您有兴趣了解更多关于为什么这种差异很重要信息,请继续阅读。 什么是RGB RGB 就是看光 计算机屏幕以不同红、绿和蓝光组合显示图像、文本和设计中颜色。...这些子像素根据像素最终显示颜色以不同强度点亮,以在黑色监视器上产生结果。 您正在阅读本文屏幕由数百个像素组成。这些像素聚集在一起以显示您看到文字和图像。...在 CMYK 模式下将颜色加在一起结果影响与 RGB 相反;添加颜色越多,结果越暗。因此,颜色会被去除或减去,以创造出明亮效果。...RGB 是用于屏幕显示颜色模式。 在 CMYK 模式下添加颜色越多,结果越暗。添加到 RGB 颜色越多,结果越亮。 CMYK 数值范围为 4x100;RGB 数值范围为 3x256。...查看其中一些资源以确保您做得。 作为一名设计师,如果您为项目精心挑选颜色没有达到您预期,那将是一种真正耻辱。正如我们需要注意设计中字体、元素大小和间距一样,颜色是另一个需要注意方面。

1.6K20

概率统计——为什么条件概率结果总和直觉不同

所以另一个孩子也是女孩概率是1/3。 这个答案计算过程没什么问题,我想大家应该都能看明白,但是不知道会有多少人觉得奇怪。为什么答案不是 1/2 呢?难道两个孩子性别不是独立吗?...还是之前题目里夫妻,还是那两个孩子(至少有一个是女孩)。不同是,假设有一天我们在公园碰见了这一夫妻。不过,与此同时,夫妻还带了一个孩子。...我们之前一通分析,用上各种公式进行计算,得到结果明明是1/3,为什么这里就变成 1/2 了呢?这两道题难道不是一样吗?...这样理解都行得通,但还是没有解决我们之前疑惑,为什么看起来完全一样两件事,得到结果不同呢?就因为我们看到了其中一个孩子吗?可是我们看到孩子,与孩子性别的概率应该无关才。...我们看孩子之前,两个孩子是一体,我们看了一眼之后,这两个孩子就区分开来了。我们看之前,这是两个孩子,看了之后,就成了我们看过孩子和没看过孩子。从物理学上来看,这两者熵是不同

1.2K20

HttpURLConnection调用get方法碰到奇怪编码问题--不同方式调用同一个方法竟然有不同结果

,从单元测试调用这个方法是正常,而从页面上通过ajaix调用这个方法还是找不到数据,注意:这里关键字“浙江”已经写死在代码里了,也就是说不管传什么参数都是一样。...它们之间区别仅仅是调用路径不同,一个是从单元测试调用,一个是从页面上调用。...页面调用 通过页面ajax调用接口: 参数也能正常传到Controller,问题是sendUrl我已经在方法里写死了,却得到了不一样结果: /** * 获取公司列表...这是通过单元测试方法发送请求,编码没有问题: 这是通过页面发送请求,编码就有问题了: 不同方式调用同一个方法,为什么会有这样区别呢?真是搞不明白。。。...但是单元测试时候,为什么不编码也可以呢?而从页面上通过Controller调用就有编码问题? 这个疑问还没解开。。。 如果有大神知道原因,请不吝赐教,谢谢!

1.4K10

「Adobe国际认证」在设计行业,为什么大但设计,不会有结果?

不幸是,新设计并没有换来用户喜欢。 当时,Twitter 上充斥着 Snapchat 用户其最近徽标更新评论。...总的来说,当时在Twitter上很难找到 Snapchat 新LOGO标志设计任何积极评论。 虽然 Snapchat 新LOGO设计成本可能很小,但还有其他成本伴随着像这样改变。...唯一区别是轮廓重量,这绝对是显而易见。如果 Snapchat 目的是在用户解锁手机后立即吸引他们注意力,那么毫无疑问它奏效了。 那么为什么会有如此大反弹呢?...虽然您可能不认为自己 Snapchat 有情感依恋,但我们对事物外观和感觉方式有一种潜意识情感依恋。...他们LOGO标志是熟悉、怀旧、安全——随着改变而来是那些美好感觉被抹去,我们必须从头开始。 其次,新LOGO标志在游戏中扮演着重要角色“其中一个与另一个不同”。

28320

为什么JavaScript未来持乐观态度?

Lee Robinson 写了一篇《Why I'm Optimistic About JavaScript's Future》 表达 JavaScript 未来看好。 正文开始......我JavaScript持乐观态度。 开发人员希望编写 JavaScript,并希望它能在浏览器、服务器或 Edge运行。...在 Node.js 18 之前,没有内置获取数据方案。使用 fetch 需要使用 node-fetch 或 undici 等包,它们 API 类似但略有不同,通常是以不明显方式使用。...我服务器上 JavaScript(和 TypeScript)感到乐观。这不仅仅是 fetch。...将 edge 视为最高抽象层次可能会有所帮助,在这里你将把所有时间都花在业务逻辑上。 图片 Edge并不是全新东西,而是从现有的Node.js世界中刻意、有意取舍。

88730

不同工具包Voxel-based morphometry (VBM)计算结果影响

而这种结果不一致性是否是由于采用不同工具包进行分析而导致呢?...近期,有研究者在《Brain Imaging and Behavior》杂志上发表研究论文,精神分裂患者Voxel-based morphometry (VBM)结果不一致性是否是由于所用工具包不同而导致这个问题进行了研究...笔者在这里这篇文章进行简单解读,希望大家不同工具包VBM计算结果影响有一定认识。 数据分析方法 86名精神分裂患者和86名健康对照组进行MRI扫描,搜集T1影像。...对于两种工具包,采用默认参数设置T1影像进行处理。...总结 总之,本文研究结果表明,不同工具包得到VBM结果存在一定差异,这可能是由于不同工具包中采用算法不同所导致。但是哪种工具包更优,现在还不能确定,需要未来做更多研究。

1.2K40

企业面试题: react和vue有哪些不同,说说你这两个框架看法

考核内容: 移动框架应用,及理解 题发散度: ★★★★ 试题难度: ★★★★ 解题思路: 相同点 · 都支持服务器端渲染 · 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据传递...,都实现webComponent规范 · 数据驱动视图 · 都有支持native方案,ReactReact native,Vueweex 不同点 · React严格上只针对MVCview层,Vue...shouldComponentUpdate这个生命周期函数方法来进行控制 · 组件写法不一样, React推荐做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript...了,即'all in js'; Vue推荐做法是webpack+vue-loader单文件组件格式,即html,css,jd写在同一个文件; · 数据绑定: vue实现了数据双向绑定,react数据流动是单向...· state对象在react应用中不可变,需要使用setState方法更新状态;在vue中,state对象不是必须,数据由data属性在vue对象中管理

95220

明明结果为什么被合并查询后得到结果却出错了?| Power Query躲坑

最近,有位朋友在一个实际工作问题中,在表2使用合并查询从表1结果中匹配最高(阶段)项,眼看着表1结果,但表2里却得到了错误返回结果,具体情况如图所示: 为什么会这样?...我们先来看表1处理情况。 为了合并查询得到最高阶段项,对表1进行降序排序: 然后通过删除重复项保留最高阶段数据: 从表1结果来看,的确保留了最高阶段数据。...然后,在表2里使用合并查询获取表1中结果并展开: 咦!!! 表1处理结果明明是阶段4(报价),为什么合并查询得到结果却是阶段2(售前)? 这难道是Power QueryBug吗?...这里问题根源其实是表1处理问题,我以往发布多篇文章案例中,在涉及Power Query中使用排序问题时会强调,Power Query排序需要增加添加索引或Table.Buffer步骤,使排序结果真正...所以,回到这个问题,针对表1排序步骤,我们可以嵌套Table.Buffer函数(图中中间行为原排序操作生成代码,无所做任何改变): 这时,我们再看表2结果: 完全正确!

2.5K10

是的,不同版本cellranger软件10x技术单细胞定量结果可以相差5倍以上

今年暑期实习生开启了他单细胞学习笔记系列,就是《暑假一起学单细胞》,其中第二讲是 一文搞定基本cellranger定量,就有小伙伴留言说:用最新版本cellranger出单细胞数量比老版本多很多...,因为它数据集是(PRJNA777911)也就是说并没有给出来表达量矩阵,需要自己去下载fq文件走cellranger软件10x技术单细胞定量流程,很耗费时间,当时仅仅是觉得 它降维聚类分群似乎是不理想...fq文件后走了这个cellranger软件10x技术单细胞定量,然后发现居然是细胞数量真的是10万以上!!!...如下所示: 细胞数量真的是10万以上 这样就很尴尬,细胞数量如此差异,很让初学者怀疑是不是什么地方有问题,交流了代码就发现确实是不同版本cellranger软件10x技术单细胞定量结果可以相差两倍以上...大量测序reads本来是落在了基因内含子区域是不会被计入表达量,但是最新版改变了策略,落在基因内含子区域测序reads计入基因表达量,所以之前很多不合格细胞这次合格了。

32020

是的,不同版本cellranger软件10x技术单细胞定量结果可以相差5倍以上

今年暑期实习生开启了他单细胞学习笔记系列,就是《暑假一起学单细胞》,其中第二讲是 一文搞定基本cellranger定量,就有小伙伴留言说:用最新版本cellranger出单细胞数量比老版本多很多...,因为它数据集是(PRJNA777911)也就是说并没有给出来表达量矩阵,需要自己去下载fq文件走cellranger软件10x技术单细胞定量流程,很耗费时间,当时仅仅是觉得 它降维聚类分群似乎是不理想...fq文件后走了这个cellranger软件10x技术单细胞定量,然后发现居然是细胞数量真的是10万以上!!!...如下所示: 细胞数量真的是10万以上 这样就很尴尬,细胞数量如此差异,很让初学者怀疑是不是什么地方有问题,交流了代码就发现确实是不同版本cellranger软件10x技术单细胞定量结果可以相差两倍以上...大量测序reads本来是落在了基因内含子区域是不会被计入表达量,但是最新版改变了策略,落在基因内含子区域测序reads计入基因表达量,所以之前很多不合格细胞这次合格了。

32920

看知乎学习js事件触发过程

红色箭头代表捕获阶段 蓝色代表目标阶段 绿色代表冒泡阶段 调用元素对象addEventListener()方法,参数:事件,回调函数,是否捕获(true代表捕获阶段,false代表冒泡阶段,ie浏览器不支持在捕获阶段绑定事件因此一般写...属性,代表当前元素对象 使用事件代理,给父节点绑定监听事件,可以提升性能,可以减少绑定给每个子节点 停止事件冒泡,调用Event对象stopPropagation()方法,降低事件复杂性 知乎:javascript...表示冒泡阶段 问题一:当调用这个属性时候输出结果都是2,什么时候会出现其他结果?...问题二:根据上面的3个例子事件处理程序在哪个阶段被处理,那么eventPhase不就是它在哪个阶段被处理结果? 问题三:不同阶段处理事件,会有什么不同?有具体例子吗?...——《JavaScript高级程序设计》。 我在看这部分时候,觉得挺合理。既然是目标元素事件处理程序,当然得在处于目标阶段处理事件了啊。 具体为什么我也在找答案,求大神讲解。

3.7K10

浅谈JavaScript事件(事件处理程序)

在HTML中定义事件处理程序可以包含要执行具体动作,也可以调用定义在其他页面的脚本。...上面的例子上,如果divClick函数定义在div下方,我们在函数尚未解析之前,就点击div,这样就会导致报错。   另一个缺点是,这样事件处理程序作用域链在不同浏览器中会导致不同结果。...不同JavaScript引擎遵循标识符解析规则略有差异,很可能在访问非限定对象时出错。   通过HTML指定事件处理程序最后一个缺点是HTML与JavaScript代码紧密耦合。...所有DOM节点都包含这两个方法,并且他们接收3个参数:要处理事件名、作为事件处理程序函数和一个布尔值。...在使用addEventListener和removeEventListener时候,第二个事件处理程序函数必须是同一个函数才会有作用,我们对上面的代码作一个修改,就可以了。

1.4K50

解析Javascript事件冒泡机制

分析以上结果: 无论是body,body 子元素div1,还是 div子元素div2,还有 span, 当这些元素被点击click时,都会产生click事件,并且body都会捕获到,然后调用相应事件处理函数...这显然不是我们想要! 我们希望是点谁显示谁信息而已。为什么会出现上述情况呢?...; event.stopPropagation(); }); } 经过这样一段代码,点击不同元素会有不同提示,不会出现弹出多个框情况了。...答案是可以,下面通过给body 元素添加事件监听,然后通过判断event.target 然后不同target产生不同行为。        ...; break; } }             结果会是点击不同元素,只弹出相符合提示,不会有多余提示。

61040

微前端07 : single-spa路由管理及微应用状态管理分析

类似,不在此赘述 }; 代码片段2中,核心逻辑我们可以这样概括,将原始window.addEventListener和window.removeEventListner保存起来,然后这两个监听函数进行重写...如果所要监听函数不是hashchange或popstate,则调用原始window.addEventListener或window.removeEventListner注册对应监听事件。...至于其他状态变化和加载阶段状态变化并没有太大不同,就不在本文中进行赘述了。...在加载阶段,会涉及一个toLoadPromise函数,代码如下: “注:至于toLoadPromise是在何时调用,本文暂不分析,在后面会有文章介绍reroute函数一些主要逻辑时候会提到,此时只需要该函数会在加载阶段执行即可...,就是在不同阶段修改代表微应用对象app上面的status属性值。

1.3K10

【前端 · 面试 】JavaScript 之你不一定会基础题(二)

[JavaScript 之你不一定会基础题] 前言 在上一篇文章【前端 · 面试 】JavaScript 之你不一定会基础题(一)中,有同学产生了这样一个疑惑:为什么 click 事件监听函数中,...点击 id 为 child div 后,JavaScript 代码执行结果分别是什么?...对于这个答案中第二次输出结果,有人生出了疑惑:为什么 parent 事件触发时,e.target.id 结果为 child呢?不应该是 parent 吗?...这两个阶段如下图所示: [bubbling-capturing] 在现代浏览器中,默认情况下,所有事件处理程序都在冒泡阶段进行注册,这也是为什么只有一个阻止冒泡方法方法 event.stopPropagation...元素 addEventListener 方法中第三个参数是 true 或者 false,元素自己触发事件流程都没有任何影响,只有在它父元素或者子元素在触发相同事件后才有影响。

53910

salesforce lightning零基础学习(五) 事件阶段(component events phase)

这两种方式和javascript中针对事件处理Capture以及Bubble很相似。先以javascript针对DOM结构事件监听进行描述。 以一个demo进行讲解。...,但针对其事件仅会调用一次,所以这就是 事件绑定时需要声明你事件阶段为 capture 还是 bubble,因为不同阶段会有不同事件调用顺序,即不同传播路径。...demo中针对默认bubble调用,所以打印出来结果为: SPAN A DIV 如果把demo中参数从false转换为true, document.getElementById('sampleSpanId...这里可能有两个疑问: 1.为什么第一个注册了事件以后,后期直接使用aura:handler来进行执行事件,而不是每一个都需要注册事件? 2.为什么输出结果是两项,而不是三项Log? 分析: 1....,所以输出时候回输出三个log结果

62621

40行代码内实现一个React.js

本文目的是:揭开初学者看起来很很难理解 React.js 组件化形式外衣。如果你刚开始学习 React.js 并且感觉很迷茫,那么看完这篇文章以后就能够解除一些疑惑。...现在这个组件可复用性已经很不错了,你同事们只要实例化一下然后插入到 DOM 里面去就好了。 4、为什么不暴力一点?...这样结果就是,用户每次点击,changeLikeText 都会调用改变组件状态然后调用 setState;setState 会调用 render 方法重新构建新 DOM 元素;render 方法会根据...state 不同构建不同 DOM 元素。...4.2 重新插入新 DOM 元素 上面的改进不会有什么效果,因为你仔细看一下就会发现,其实重新渲染 DOM 元素并没有插入到页面当中。

2.5K30

JavaScript是如何处理事件?

#思特沃克好声音# (图片:网络) 想必大家都知道JavaScript一般都是在浏览器中执行,大家也知道可以通过事件调用JavaScript函数,可是大家清楚JavaScript是如何处理事件吗?...,说到这里不得不提一下GUI渲染线程,虽说浏览器支持线程异步执行,但是JavaScript线程和GUI渲染线程是互斥,也就是说在JavaScript脚本操作DOM时,GUI渲染线程处于挂起状态不会有任何动作...,有兴趣可以自行google),此时才会接手界面进行渲染(这也是为什么网页优化建议中js文件要放在html内容最后,就是因为加载js时候,会阻塞DOM树构建),下面我们看个小栗子: (function...,而是会有两秒钟等待时间,然后GUI渲染线程才会讲被插入元素进行更新和显示。...每一个webworker间都是相互独立,都在自己线程中运行,现阶段各浏览器规范实现并不统一,但是我们仍然其充满期待,因为它多线程特性为基于Web系统开发程序猿们提供了强大并发程序设计功能

82960
领券