将多个 EventListener 设置为元素但删除单个元素答案

【问题标题】：Set multiple EventListener to element but delete single ones将多个 EventListener 设置为元素但删除单个元素
【发布时间】：2020-07-06 20:49:13
【问题描述】：

我有一个元素，在这个例子中 - $(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>

【问题讨论】：

注意 bind/unbind 已被弃用并在内部使用 on/off

标签： javascript html jquery bootstrap-4

【解决方案1】：

您可以为此使用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>

【讨论】：

【解决方案2】：

您可以将.namespace 添加到您的活动中。这仍然会触发相同的scroll 事件，但允许您使用.off（或原始代码中的.unbind）引用它。

您的代码已更新：

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

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

// After 2 seconds stop logging 1
setTimeout(() => {
  $(window).off("scroll.temp"); // 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>

更多信息来自：https://api.jquery.com/on/

事件名称和命名空间

任何事件名称都可以用于 events 参数。 jQuery会通过浏览器的标准JavaScript事件类型，当浏览器由于点击等用户动作产生事件时调用handler函数。

【讨论】：