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

addEventListener仍会多次触发(即使使用相同的名称回调)

addEventListener是JavaScript中的一个方法,用于向指定的元素添加事件监听器。当指定的事件发生时,该监听器会被触发执行。

在某些情况下,即使使用相同的名称回调函数,addEventListener仍然会多次触发。这通常是因为事件冒泡或事件捕获机制导致的。

事件冒泡是指当一个元素上的事件被触发时,它会向父级元素传播,直到传播到文档根节点。这意味着如果父级元素也有相同的事件监听器,它也会被触发。因此,如果在父级元素和子级元素上都添加了相同的事件监听器,事件就会触发多次。

事件捕获是指当一个元素上的事件被触发时,它会从文档根节点开始向下传播,直到传播到目标元素。然后,事件会在目标元素上触发,并继续向上传播到父级元素。同样地,如果在目标元素和父级元素上都添加了相同的事件监听器,事件也会触发多次。

为了避免事件多次触发的问题,可以使用事件对象的stopPropagation方法来停止事件的传播。在事件监听器中调用event.stopPropagation()可以阻止事件继续向上传播或冒泡。

以下是一些应用场景和示例:

  1. 单击事件监听器:
代码语言:txt
复制
document.getElementById("myButton").addEventListener("click", function(event) {
  event.stopPropagation(); // 阻止事件冒泡或捕获
  console.log("Button clicked");
});
  1. 表单提交事件监听器:
代码语言:txt
复制
document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单提交
  console.log("Form submitted");
});
  1. 键盘按键事件监听器:
代码语言:txt
复制
document.addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    console.log("Enter key pressed");
  }
});

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

  1. 云函数(Serverless):https://cloud.tencent.com/product/scf
  2. 云服务器(CVM):https://cloud.tencent.com/product/cvm
  3. 云数据库 MySQL 版(CDB):https://cloud.tencent.com/product/cdb_mysql
  4. 云原生容器服务(TKE):https://cloud.tencent.com/product/tke
  5. 人工智能平台(AI Lab):https://cloud.tencent.com/product/ailab
  6. 物联网开发平台(IoT Explorer):https://cloud.tencent.com/product/iothub
  7. 移动应用开发平台(MPS):https://cloud.tencent.com/product/mps
  8. 对象存储(COS):https://cloud.tencent.com/product/cos
  9. 区块链服务(BCS):https://cloud.tencent.com/product/bcs
  10. 腾讯云元宇宙:https://cloud.tencent.com/solution/virtual-universe
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Callbacks vs Events

文章主要指出了用“模式实现自定义事件”一些弊端,同时提出了一种解决方案,即将回函数包装成原生事件,利用事件系统触发   来完成触发。...然而 这些自定义事件实现往往使用是一种模式。   系统(模式)往往需要一个数组来存储函数。如果当前事件被处罚,则系统会轮询这个数组,并依次调用这些函数。...如果任何一个函数抛出错误,那么随后函数将不会被执行。实际上,这也意味着一个 写很烂插件有可能会阻止其他插件初始化或正常工作。   Dojo也和jQuery一样有着相同问题。...这样,即使其中一个 执行出错也会继续执行下一个函数,而且不会抛出错误: YAHOO.util.Event.onDOMReady(function() { console.log("Init:...但是,我们需要寻找真正解决(兼容)方案。 解决方案   可以将回模式和真实事件触发结合在一起混合使用。我们可以出发一个伪事件,并在该事件内,执行函数。每个函数都拥有其自己执行上下文。

58540

老生常谈函数防抖与节流

生活化理解:英雄技能条,技能条读完才能使用技能(R大招60s) 防抖实现方式分两种 “立即执行” 和 “非立即执行”,区别在于第一次触发时,是否立即执行函数。...非立即执行 ”非立即执行防抖“ 指事件触发后,函数不会立即执行,会在延迟时间 n 秒后执行,如果 n 秒内被调用多次,则重新计时延迟时间 // e.g....('keyup', printUserName); 立即执行 “立即执行防抖” 指事件触发后,函数会立即执行,之后要想触发执行函数,需等待 n 秒延迟 // e.g....如果这个单位时间内触发多次函数,只有一次生效(间隔执行) 生活化理解: FPS射击游戏子弹射速(即使按住鼠标左键,射出子弹速度也是限定) 水龙头滴水(水滴攒到一定重量才会下落) 函数节流实现方式有...“防抖” 与 “节流” 异同 相同:都是防止某一时间段内,函数被频繁调用执行,通过时间频率控制,减少函数执行次数,来实现相关性能优化。

66340
  • JavaScript 中防抖和节流应用

    我们在 debound 函数后返回回函数,这种包装方式,保证过了 delay 秒之后,函数才会被调用。...防抖函数在自动填充情形非常好用,你也可以使用在其他地方,你想将多个触发请求变成一个触发,以缓解服务器压力。...,但是它们主要不同是,throttle 中函数在函数执行后立马被调用,并且函数不在定时器函数内。...如果 waitingArgs 有内容,这就意味着延时到了之后,我们将会带上 waitingArgs 参数触发我们函数,然后重置我们定时器。...每次我们触发 throttle 函数时,如果延时时间结束,我们要么调用回函数,要么保存要在延时结束时使用参数。

    77930

    BOM概述

    ('load',function(){})可以多次调用,推荐使用 window.addEventListener('load',function(){ alert...在讲解定时器之前,我们先来了解一下函数: 函数callback 函数常常是指其他内容完成之后,在一定条件下再重新调用该函数 例如我们之前讲到click事件后函数,在我们点击某对象后才会触发...0,即如果不写延迟毫秒数,默认为立即触发状态,但该函数仍旧被认为是函数 因为定时器较多,我们常常为定时器设置var变量标识符,同时Timeout定时器停止中timeout ID就是指该标识符 clearTimeout...0,即如果不写延迟毫秒数,默认为立即触发状态,但该函数仍旧被认为是函数 因为定时器较多,我们常常为定时器设置var变量标识符,同时Timeout定时器停止中timeout ID就是指该标识符 clearInterval...先执行执行栈中同步任务 异步任务(函数)放入任务队列中 一旦执行栈所有同步任务执行完毕,系统就会按照次序读取任务队列中异步任务,于是被读取异步任务结束等待状态,加载进执行栈末尾并开始执行

    1.1K10

    深入学习 React 合成事件

    事件触发 从事件绑定得知我们点击button按钮时候,触发函数并不是实际函数,而是dispatchEvent函数, 所以我们通常会有几个疑问 它是怎么获取到用户事件函数?...,并且把他们事件组合到合成事件对象上,这里先讨论事件触发流程,所以先简单带过合成事件是如何生成以及是如何去寻找到需要被触发事件, 后面会详细讲解合成事件,最后在拿到合成事件以后调用runEventsInBatch...,如果有多个函数,在执行每个函数时候还会去判断event.isPropagationStopped()状态,之前有函数调用了合成事件stopPropagation函数的话,就停止执行后续...对象上就会有三个函数[handleButtonLog, handleH1Log, handleDivLog],这里函数就是我们在组件内定义真实事件函数。...到此合成事件构造就完成了,主要做了三件事: 通过事件名称去选择合成事件构造函数, 事件去获取到组件上事件绑定函数设置到合成事件上_dispatchListeners属性上,用于事件触发时候去调用

    1.1K31

    事件防抖和节流

    防抖和节流函数是我们经常用到函数,在实际开发过程中,如 scroll、resize、click、键盘等事件很容易被多次触发,频繁触发会导致页面卡顿和抖动,为了避免这种情况,需要使用节流和防抖方法来减少无用操作和网络请求...#防抖和节流本质 都是闭包形式存在. 他们通过对事件函数进行包裹、以保存自由变量形式来缓存时间信息,最后使用 setTimeout 来控制事件触发频率。...last,用于下次判断 * 使用call调用传入函数,并传入参数 * */ 使用:在 onScorll 中使用节流 // 使用 throttle 来包装 scorll 函数,设置间隔时间为...* 然后如果再次点击重复上面的操作,一直到delay时间内没点时,定时器执行 * 执行时:使用call调用传入函数,并传入参数 * */ 使用:在 onScorll 中使用防抖 // 用...debounce来包装scroll const better_scroll = debounce(() => console.log("触发了滚动事件"), 1000); document.addEventListener

    53920

    函数防抖(debounce)和节流(throttle)在H5编辑器项目中应用

    ,每当 mousemove 、scroll、 resize 等事件触发时,会不断调用绑定函数,非常耗费计算资源,如果能减少计算频率,对前端用户体验会有明显提升。...1.3 需求所迫 还有很多时候,为了减少不必要脏数据以保证数据准确性,以及降低服务器负载等,前端必须减少函数触发次数,不得不使用函数节流防抖。 2....很多时候,开发者会优先用遮罩层来防止用户重复点击,其实,理论上单用遮罩是不能防重,因为如果客户端性能不足,遮罩层显示会在用户多次点击之后。...配置信息保存 越来越多产品倾向于使用无保存按钮交互方式,用户每操作完一步后自动提交请求保存,如果使用函数防抖,H5编辑器就可以减少例如计数器频繁操作触发保存频率。 4....时间戳方式: // 每次调用记录当前时间,执行函数前比对间隔时间 const _.throttle = function (func, delay) { let prev = Date.now(

    1.7K106

    前端 JavaScript 之『节流』简单代码实现

    前戏 首先,总结一下上一篇文章——《前端 JavaScript 之『防抖』简单代码实现》内容:「防抖」就是在高频率触发事件停止触发后,延时执行某个处理逻辑。...防抖虽然在一定程度上对性能起到了优化效果,但是,我们也要看到它局限性:如果高频率事件一直触发,那么函数中逻辑就一直得不到执行。...大家都知道,掘金编辑器带有草稿箱效果,即你输入内容会保存下来,即使我们退出编辑器页面了,再次进入还是可以找回前面输入内容,这是因为编辑器 input 事件中执行了发送内容防抖函数。...: [11-38-15-hNJycp.gif] 即使我们想要执行输出逻辑,但是也不能接受这么高频率输出,一个是造成了输出内容冗余,二是渲染强度高,不太划算。...新需求 假如,现在有这么一个新需求,要我们在 input 事件中加入新逻辑:每隔一段时间后,都会执行一次函数中逻辑。 这个需求是不是挺符合节流函数使用场景,那我们赶紧来实现一个吧。

    50210

    前端 JavaScript 之『节流』简单代码实现

    前戏 首先,总结一下上一篇文章——《前端 JavaScript 之『防抖』简单代码实现》内容:「防抖」就是在高频率触发事件停止触发后,延时执行某个处理逻辑。...防抖虽然在一定程度上对性能起到了优化效果,但是,我们也要看到它局限性:如果高频率事件一直触发,那么函数中逻辑就一直得不到执行。...大家都知道,掘金编辑器带有草稿箱效果,即你输入内容会保存下来,即使我们退出编辑器页面了,再次进入还是可以找回前面输入内容,这是因为编辑器 input 事件中执行了发送内容防抖函数。...: [11-38-15-hNJycp.gif] 即使我们想要执行输出逻辑,但是也不能接受这么高频率输出,一个是造成了输出内容冗余,二是渲染强度高,不太划算。...新需求 假如,现在有这么一个新需求,要我们在 input 事件中加入新逻辑:每隔一段时间后,都会执行一次函数中逻辑。 这个需求是不是挺符合节流函数使用场景,那我们赶紧来实现一个吧。

    44010

    【React深入】React事件机制

    根据事件名称(如 onClick、 onCaptureClick)判断是进行冒泡还是捕获。 判断是否存在 addEventListener方法,否则使用 attachEvent(兼容IE)。...触发 document注册原生事件 dispatchEvent 获取到触发这个事件最深一级元素 例如下面的代码:首先会获取到 this.child <div onClick={this.parentClick...根据元素 nodeid(唯一标识 key)和事件类型从 listenerBink中取出函数 返回带有合成事件参数函数 总流程 将上面的四个流程串联起来。 ?...try { func(a); } catch (x) { if (caughtError === null) { caughtError = x; } }} 可见,函数是直接调用调用...它具有与浏览器原生事件相同接口,包括 stopPropagation() 和 preventDefault() ,在所有浏览器中他们工作方式都相同

    1.2K40

    微任务、宏任务与Event-Loop

    所有会进入异步都是指事件那部分代码 也就是说new Promise在实例化过程中所执行代码都是同步进行,而then中注册才是异步执行。...以及还要明确是,Event Loop只是负责告诉你该执行那些任务,或者说哪些触发了,真正逻辑还是在进程中执行。...,多次修改只会有一次触发。...但是同时还提到了如果在主进程中直接执行这两个操作,很难保证哪个会先触发。 因为如果主进程中先注册了两个任务,然后执行代码耗时超过XXs,而这时定时器已经处于可执行状态了。...所以会导致发送事件时没有注册后事件不会再次发送。

    72720

    Resize Observer 介绍及原理浅析

    viewport 大小发生变化时会被触发,元素大小变化不会触发 resize 事件;并且也只有注册在 window 对象上会在 resize 事件发生时被调用,其他元素上不会被调用。...关心盒模型变化时才会触发通知,但实际上通知时会将三种不同盒模型下具体大小都返回给函数,用户无需再次手动获取。...在浏览器触发 reflow 后,所有已有元素位置都会记录快照,只要不再触发位置等变化导致快照失效,那么第二次开始访问位置就不会触发 reflow 当前面的通知改变了 Layout 时,下一个 ResizeObserver...结合上图,我们假设这样场景,在监听到 「节点1」 宽度变化时,设置 「子孙节点2」 宽度;而在 「节点2」 宽度改变时,我们对 「节点1」 宽度进行改变,此时可能又会触发 「节点1」 监听...有三种限制策略可以考虑: 执行次数限制 允许执行最多次数 N 次循环,当超过次数 N 时,循环终止 优点是实现简单,并且具有一致性,当这个算法在不同机器上运行时都能有相同表现 缺点是 N 定义太过随意

    3.3K40
    领券