首页
学习
活动
专区
工具
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.7K20

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

所以另一个孩子也是女孩概率是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标志在游戏中扮演着重要角色“其中一个与另一个不同”。

    29720

    为什么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世界中刻意、有意取舍。

    90830

    不同工具包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对象中管理

    97220

    明明结果为什么被合并查询后得到结果却出错了?| 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.9K10

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

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

    39321

    为什么ChatGPT、ChatGLM这样大语言模型说“你是某某领域专家”,它回答会有效得多?(二)

    (注:784 维空间 784-dimensional space 是一个矩阵,不用纠结为什么是784 维,这也是为什么人工智能受制于算力原因:计算量大。现在优化计算量也是正在研究方向之一。)‍‍...通常在实际神经网络训练中会进行许多随机选择,这会导致“不同但等效解”,就像下面这些: 然而,每个这样不同解”都会有至少稍微不同行为。...如果我们要求在我们给出训练样例之外“外推”区域进行预测,我们可能会得到截然不同结果。 但是哪个结果是“正确”?实际上没有办法说。它们都“与观察到数据一致”。...有不同损失函数选择(平方和、绝对值和等)。有不同损失最小化方式(每步在权重空间中移动多远等)。然后还有一些问题,例如每次展示多少个“批次”示例来获得要最小化损失每个连续估计。...在未来,是否会出现基本上更好训练神经网络方法,或者说执行神经网络任务方法?我认为几乎可以肯定会有

    11810

    为什么ChatGPT、ChatGLM这样大语言模型说“你是某某领域专家”,它回答会有效得多?(三)

    经过前面两期漫长介绍文章: 为什么ChatGPT、ChatGLM这样大语言模型说“你是某某领域专家”,它回答会有效得多?...(一) 为什么ChatGPT、ChatGLM这样大语言模型说“你是某某领域专家”,它回答会有效得多?...为什么要将标记值和标记位置嵌入向量相加呢?我认为这并没有特定科学原理。只是尝试了各种不同方法,而这种相加方式似乎是有效。...这与典型计算系统(如图灵机)非常不同,后者会将结果通过相同计算元素重复“重新处理”。在这里,至少在生成给定输出标记时,每个计算元素(即神经元)仅使用一次。...例如,正如上面的标志性摘要所示,注意力块内部存在“输入数据进行多次复制”地方,然后每个副本通过不同“处理路径”进行处理,可能涉及不同数量层,直到稍后重新组合。

    8810

    为什么ChatGPT、ChatGLM这样大语言模型说“你是某某领域专家”,它回答会有效得多?(一)

    我们能做最简单事情就是获取英文文本样本,并计算其中不同字母出现频率。...这是字母本身概率图: 下面的图显示了典型英语文本中字母(“2-grams”)概率。...这是结果示例,其中恰好包含一些“实际单词”: 有了足够多英文文本,我们不仅可以对单个字母或字母(2-grams)概率进行很好估计,而且还可以对较长字母序列进行估计。...有一段时间我们函数仍然“识别”它,这里是“2”。但很快它就“失去了它”,并开始给出“错误”结果: 但为什么我们说这是“错误”结果呢?在这种情况下,我们知道我们通过模糊“2”获得了所有图像。...是的,对于蜜蜂或章鱼来说,答案无疑会有不同,对于假定外星人来说,答案也可能完全不同

    11210

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

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

    38120

    看知乎学习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.5K50

    解析Javascript事件冒泡机制

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

    73840

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

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

    1.4K10

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

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

    55310
    领券