How to remove onLoad event listener which was passed to constructor's tabs.open?

Question

I create a new tab with some constructor parameters such as onLoad event:

tabs.open({
    url: url,
    onLoad: function onLoadFn(tab) {
        console.log("Tabs.open; onLoadFn()");
        setTimeout(function() {
            handler(this.findWorker(tab));
            tab.removeListener("load", onLoadFn);
        }.bind(this), 500);
    }.bind(this)
});

I want to delete the event listener just after execution. I have tried:

tab.removeListener("load", onLoadFn);
tabs.removeListener("load", onLoadFn);

but it's not working.

How do I delete this onLoad event listener?

Answer 1

The issue here is that you're trying to remove a function that you never add. You didn't add onLoadFn as listener, but a new function, based on onLoadFn, where you bound this, To be more precise:

function foo() {};

console.log(foo === foo.bind(this)); // false

I don't know why you need such thing, so I can't really suggest a more elegant way to do so, but if you want to remove the listener you have to pass the same function you're adding. So you have to save the reference of the result of the binding somewhere, and the remove that. As alternative, you could also uuse tabs.once("load", listener) before call the open, that will do that for you – as the name suggest, it will execute the listener just once, the first time the event is emitted.