时间戳

首页 > 解决方案 > 将多个 EventListener 设置为元素但删除单个元素

javascript - 将多个 EventListener 设置为元素但删除单个元素

问题描述

我有一个元素，在这个例子中 - $(window)。我想在这个元素上放置几个相同的 EventListener，这里“滚动”两次。这两个 EventListener 各自执行不同的功能，我不能/不想相互连接，这里以简化的方式显示。如何删除单个 EventListener？

这是我做的一个小例子。

// Logs 1 when scrolling
$(window).on("scroll", () => {
    console.log(1);
});

// Logs 2 when scrolling
$(window).bind("scroll", () => {
    console.log(2);
});

// After 2 seconds stop logging 1
setTimeout(() => {
  $(window).unbind("scroll"); // remove only logging 1
}, 2000);
#test {
  height:10000px;
  width:100vw;
  background:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test"></div>

标签： javascripthtmljquerybootstrap-4

解决方案

您可以使用event.namespace它并为滚动事件添加多个命名空间，例如：

$(window).on("scroll.event1", () => {
    console.log(1);
});

$(window).on("scroll.event2", () => {
    console.log(2);
});

当您想删除事件 1 时，您可以简单地调用.off它，如下所示：

setTimeout(() => {
  $(window).off("scroll.event1"); // remove only logging 1
}, 2000);

演示：

$(window).on("scroll.event1", () => {
  console.log(1);
});

$(window).on("scroll.event2", () => {
  console.log(2);
});

// After 2 seconds stop logging 1
setTimeout(() => {
  $(window).off("scroll.event1"); // remove only logging 1
}, 2000);
#test {
  height: 10000px;
  width: 100vw;
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test"></div>

推荐阅读