将多个事件侦听器设置为元素，但删除单个事件侦听器

Question

我有一个元素，在示例中 - $(窗口(。我想在这个元素上放置几个相同的事件侦听器，在这里"滚动"两次。这两个事件侦听器各自执行不同的功能，我不能/不想相互连接，此处以简化的方式显示。如何删除单个事件侦听器？

这是我举的小例子。

// 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>

Answer 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>

Answer 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/

事件名称和命名空间

任何事件名称都可用于事件参数。 jQuery将传递浏览器的标准JavaScript事件类型，当浏览器由于用户操作(如点击(生成事件时调用处理程序函数。