javascript 删除所有事件监听器

这篇具有很好参考价值的文章主要介绍了javascript 删除所有事件监听器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本篇文章将介绍如何删除 JavaScript 中的所有事件侦听器。


移除 JavaScript 中的所有事件监听器

EventTarget 接口的 addEventListener() 方法配置一个函数,只要指定的事件被传递到目标,就会调用该函数。

addEventListener() 方法的工作原理是将实现 EventListener 的函数或对象添加到事件侦听器列表中,以用于在调用它的 EventTarget 中指定的事件类型。

如果该函数或对象已在该目标的事件侦听器列表中,则不会再次添加该函数或对象。

EventTarget 接口的 removeEventListener() 方法删除了之前使用 EventTarget.addEventListener() 从目标注册的事件监听器。

使用未标识当前在 EventTarget 中注册的 EventListener 的参数调用 removeEventListener() 无效。

如果在目标上的另一个侦听器正在处理事件时从 EventTarget 中删除 EventListener,则不会调度该事件。 但是,它可以重新定位。

如果只为特定元素注册了一个或两个侦听器,则调用 removeEventListener 很容易。 如果注册的侦听器超过 10 个,而您想删除所有事件侦听器怎么办?

这需要努力; 我们将学习另一种方法来执行这个繁琐的操作来克服这个问题。

让我们看看下面的例子。

<div>
<button id="grt-btn">Hello World!</button>
<button onclick="removeListeners()">Remove listeners</button>
</div>
document.getElementById("grt-btn").addEventListener("click", () => {
  console.log("firstClick")
}, false);
document.getElementById("grt-btn").addEventListener("blur" , () => {
  console.log("Blur event")
}, false);
document.getElementById("grt-btn").addEventListener("focus", () => {
  console.log("focus event")
}, false);

function removeListeners() {
  const oldBtnElement = document.getElementById("grt-btn");
  const newBtnElement = oldBtnElement.cloneNode(true);
  oldBtnElement.parentNode.replaceChild(newBtnElement, oldBtnElement);
    console.log("Removed all listners")
}

在上面的例子中,我们定义了 2 个按钮。 第一个按钮是将听众附加到它的按钮。

第二个按钮将移除第一个按钮的侦听器。

我们定义了三个事件监听器; 只要点击 Hello World 按钮,就会触发焦点和点击事件。 尝试导航到另一个选项卡; 它会触发模糊事件。

最后,单击 Remove listeners 按钮,这将克隆 Hello World 按钮。 最后一步是将 div 元素的子节点替换为 cloneNode。

这将自动删除之前与该按钮关联的所有事件侦听器。

如果您尝试再次单击 Hello World 按钮,它不会触发任何事件。

输出:文章来源地址https://www.toymoban.com/news/detail-591847.html

"focus event"
"firstClick"
"Blur event"
"focus event"
"Blur event"
"Removed all listeners"

到了这里,关于javascript 删除所有事件监听器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Spring高手之路7——事件机制与监听器的全面探索

      观察者模式是一种行为设计模式,它定义了对象之间的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都会得到通知并被自动更新。在这个模式中,改变状态的对象被称为主题,依赖的对象被称为观察者。 举个实际的例子: 事件源(Event Source) :可以视

    2024年02月11日
    浏览(44)
  • Unity UGUI的EventTrigger (事件监听器)组件的介绍及使用

    EventTrigger是Unity UGUI中的一个组件,用于监听和响应UI元素的各种事件,例如点击、拖拽、进入、离开等。通过EventTrigger组件,我们可以方便地为UI元素添加各种交互行为。 EventTrigger组件通过监听UI元素上的事件,并在事件触发时执行相应的回调函数。每个UI元素可以添加多个

    2024年02月15日
    浏览(52)
  • Spring高手之路15——掌握Spring事件监听器的内部逻辑与实现

    在阅读本文之前需要你已经对事件监听器有了简单的了解,或去阅读前面的文章《 Spring高手之路7——事件机制与监听器的全面探索 》   在 Spring 中, ApplicationContext 可以形成一个层次结构,通常由主容器和多个子容器组成。一个常见的疑问是:当一个事件在其中一个容器

    2024年02月06日
    浏览(48)
  • web3j的基础用法-6合约的监听器事件Event和过滤器EthFilter,以及NullPointed,调用失败导致的bug解决

    本篇以Uniswap为例(https://uniswap.org/) 合约地址 :0x1f9840a85d5af5bf1d1762f925bdaddc4201f984 (Uni) 监听合约Tranfer事件 调用代码 核心代码实现在这里 之前实验全量区块,导致请求多次失败,是由于个人RPC节点的请求和数据有限,为了测试出结果,从13763721L block到当前,结果毫秒级返

    2024年02月11日
    浏览(50)
  • HttpSessionListener监听器和HttpSessionAttributeListener监听器

    1.作用:监听Session创建或销毁,即生命周期监听 2.相关方法: 3.使用场景: 和前面的ServletContextListener等一样,可以用于监控用户上线和离线 4.代码 HttpSessionListener监听器 实现类 HttpSessionAttributeListener监听器 1.作用:监听Session属性的变化,使用少 2.相关方法: 3.代码 监听器 实

    2024年02月04日
    浏览(51)
  • Listener监听器----HttpServletRequest对象的生命周期监听器

    一、HttpServletRequest对象的生命周期监听器         ServletRequestListener接口定义了ServletRequest(是HttpServletRequest接口的父接口类型)对象生命周期的监听行为。 void requestInitialized(ServletRequestEvent sre)         HttpServletRequest对象创建后会触发该监听器方法,并将已创建HttpServletR

    2024年01月23日
    浏览(61)
  • camunda执行监听器和任务监听器有什么区别

    Camunda的执行监听器和任务监听器是用于添加自定义逻辑的监听器,它们的区别在于作用对象和触发事件的不同。 执行监听器是与BPMN流程中的各种流程元素(例如开始事件、用户任务、服务任务、网关等)相关联的。执行监听器可以在流程元素执行前、执行后或抛出异常时添

    2024年02月04日
    浏览(56)
  • 消息监听器和消息监听容器

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 消息监听器顾名思义用来接收消息,它是使用消息监听容器的必须条件。目前有8个消息监听器: 使用自动提交或容器管理的提交方法之一,处理从 Kafka 消费者 p

    2024年02月07日
    浏览(53)
  • Android手势监听、触摸监听器、onTouchListener

    一次点击事件(onClickListener)由 一次down事件,多次move事件和一次up事件构成,move事件出现的次数由用户的按压效果决定。down表示手势事件开始,up表示结束,move则代表着过程。此时代码中onTouchLishtener方法中返回的结果为ture,则表示拦截用户的该次行为,由此方法进行处理

    2024年02月04日
    浏览(50)
  • watch监听器三种监听方式

    1、普通监听( 无法监听到第一次绑定的变化 ) 这样使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。 2、普通监听( 可以监听到第一次绑定的变化) 给 text 绑定了一个handler方法,之前我们写的 watch 方法其实默认写的就是

    2024年02月15日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包