js 如何移除带参数的监听事件

Question

function execScrollBottomFun (cb) {
    。。。
}

export function execScrollBottomCb (cb) {
    window.addEventListener('scroll', () => execScrollBottomFun(cb));
}

export function removeExecScrollBottomCb (cb) {
    window.removeEventListener('scroll', () => execScrollBottomFun(cb));
}

如上代码，removeExecScrollBottomCb执行了无效，事件还是没有被移除。

这里主要的困惑是有参数cb，所以只能再包成匿名函数。

Answer 1

你的 removeExecScrollBottomCb 相当于新建了一个函数，然后试图从 window 的监听列表里移除，当然是无效的。

解决方案的核心：addEventListener 的函数和 removeEventListener 的函数一定要是一个函数。可以用全局变量、也可以自己保存。

Answer 2

() => 1 === () => 1   // false

const f = () => 1
f === f               // true

Answer 3

你这个好像办不到（绑定/取消都需要一个key找到操做对象），还是用bus吧，看起来简洁一点

const bus = new ns.CreateEventBus()

// 直接全局订阅滚动事件
window.addEventListener('scroll', function () {
  bus.emit('on-scroll')
});

var bus1 = bus.on('on-scroll', function () {
  console.log('第一个监听', 1111)
  bus.clear(bus1) // 取消bus监听
})

var bus2 = bus.on('on-scroll', function () {
  console.log('第二个监听', 2222)
})

Answer 4

 window.addEventListener('scroll', () => execScrollBottomFun(cb));
}

addEventListener的回调函数必须是一个具名函数，你用匿名函数是移除不了的

Answer 5

var handler
function genHandler(cb) {
    return function() {
        execScrollBottomFun(cb)
    }
}

function execScrollBottomFun (cb) {
    。。。
}

export function execScrollBottomCb (cb) {
    handler = genHandler(cb)
    window.addEventListener('scroll', handler);
}

export function removeExecScrollBottomCb (cb) {
    window.removeEventListener('scroll', handler);
}