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

Shanny
  • 492
function execScrollBottomFun (cb) {
    。。。
}

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

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

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

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

回复
阅读 498
5 个回答
✓ 已被采纳

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

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

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

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

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

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)
})
 window.addEventListener('scroll', () => execScrollBottomFun(cb));
}

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

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);
}
你知道吗?

宣传栏