ethereum.removeListener not working, how to fix?

Question

I'm using etherum.on listeners and would like to remove them as advised by the documentation, however the ethereum.removeListener does not work.

I am using js not ts.

How to remove the event listener? Here is my initial code (which works fine and detects changes):

ethereum.on('accountsChanged', (accounts) => {
    if (accounts.length > 0) {
        walletTxt.innerText = 'Connected: 0x..' + accounts[0].slice(-3);
        walletTxt.style.color = "#AAFF00";
        notyf.success(walletTxt.innerText);
        balanceJoo();
    } else {
        unlocked();
        walletBtn.disabled = false;
        updateButton();
    }
});

Here is the updated code as requested by documentation (Not working in the sense that does not detect anything):

function handleAccountsChanged(accounts) {
  if (accounts.length > 0) {
    walletTxt.innerText = 'Connected: 0x..' + accounts[0].slice(-3);
    walletTxt.style.color = "#AAFF00";
    notyf.success(walletTxt.innerText);
    balanceJoo();
  } else {
    unlocked();
    walletBtn.disabled = false;
    updateButton();
  }
}

// Register the event listener
ethereum.on('accountsChanged', handleAccountsChanged);

// Later, remove the event listener
ethereum.removeListener('accountsChanged', handleAccountsChanged);
     

Any suggestion on how to remove the listener correctly? Also would like to know, will the listener stops when a new page is loaded?

Update, I also tried:

window.addEventListener("load", function() {
    accounts = ethereum.request({
        method: 'eth_accounts'
    }).then((result) => {
        console.log(result)
    });

    function handleAccountsChanged(accounts) {
        console.log('Account changed: ' + accounts);
    }
    ethereum.on('accountsChanged', handleAccountsChanged); //Works
    // ethereum.removeListener('accountsChanged', handleAccountsChanged);
})



window.addEventListener("load", function() {
    accounts = ethereum.request({
        method: 'eth_accounts'
    }).then((result) => {
        console.log(result)
    });

    function handleAccountsChanged(accounts) {
        console.log('Account changed: ' + accounts);
    }
    ethereum.on('accountsChanged', handleAccountsChanged); // Stops Working with remove listense uncommeted
    ethereum.removeListener('accountsChanged', handleAccountsChanged);
})

Answer 1

What you do in your code is add the listener and remove it immediately. I suggest you add an event listener when the page loads and remove it when it unloads; you can use the load and beforeunload events, respectively.

Here's an example of how you could add and remove an event listener for the 'accountsChanged' event in the context of a web page:

function handleAccountsChanged(accounts) {
  // Your event handling code here
}

function addEventListener() {
  ethereum.on('accountsChanged', handleAccountsChanged);
}

function removeEventListener() {
  ethereum.removeListener('accountsChanged', handleAccountsChanged);
}

window.addEventListener('load', addEventListener);
window.addEventListener('beforeunload', removeEventListener);

In this example, the handleAccountsChanged function is the event handler that will be called when the 'accountsChanged' event is triggered.

The addEventListener function adds the event listener to ethereum.on when the load event is triggered on the window object.

The removeEventListener function removes the event listener from ethereum.removeListener when the beforeunload event is triggered. This ensures that the listener is removed before the page is unloaded or closed so that it does not continue to listen for events in the background.

You should test this code in your context to ensure it works as expected. Additionally, not all browsers support the beforeunload event similarly, so you may need to modify your code depending on your target browser(s).