JavaScript-------移除监听器

本文介绍了JavaScript中如何使用addEventListener和removeEventListener添加和删除事件处理器,以及如何通过AbortSignal实现更精细的控制。特别强调了在大型项目中删除事件处理器对提高效率和实现动态功能的重要性。
摘要由CSDN通过智能技术生成

1.添加与删除:

①addEventListener() :添加事件处理器

②removeEventListener:删除事件处理器

例如,删除 changeBackground() 事件处理器:

btn.removeEventListener("click", changeBackground);

2. 添加删除事件处理器:

事件处理器可以通过传递 AbortSignal到 addEventListener(),然后在拥有 AbortSignal 的控制器上调用abort(),从而删除事件处理器。

例如,要添加一个可以使用 AbortSignal 来删除的事件处理器,可以这样做:

const controller = new AbortController();

btn.addEventListener("click",() => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  },
  { signal: controller.signal } // 向该处理器传递 AbortSignal
);

删除上面创建的事件处理器:

controller.abort(); // 移除任何/所有与该控制器相关的事件处理器

对于大的、复杂的程序,删除事件处理器可以提高效率。另外,删除事件处理器的能力允许你让同一个按钮在不同的情况下执行不同的动作:你所要做的就是添加或删除处理程序。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值