Failed to store the reference of event handler (I want to remove the event listener)

Question

As the following code, when I click the "play round" button, it add an click event listener for each three options: Rock, Paper and Scissors. When they are ready, they turn to yellow.

When player pick one of them, the event listener need to be removed (prevent from miss click again).

According to this answer Removing an anonymous event listener, I store the event handler reference when creating the event listener. It doesn't work. In the following code, we still can pick all three options.

const playerSelection = function(selected, selections) {
    selected.id = 'selected';
    selections.forEach((selection) => {
        selection.classList.remove('listening');
        // get the anonymous event handler by cached reference
        selection.removeEventListener('click', selection.clickHandler, false);
    }); 
}

const playRound = function() {
    const selections = document.querySelectorAll(".selection");
    selections.forEach((selection) => {
        selection.id = undefined;
        selection.classList.add('listening');
        selection.addEventListener('click', function clicked() {
            // trying to store the reference of event handler
            selection.clickHandler = clicked; 
            playerSelection(selection, selections);
        }, false);
    });
};

const round = document.querySelector(".round");
round.addEventListener('click', playRound);

.selection,
.round {
    width: 100px;
    height: 50px;
    border: 1px solid black;
    background-color: white;
}

.selection.listening {
    background-color: yellow;
}

#selected {
    background-color: red;
}

    <div data-name="Rock" class="selection">Rock</div>
    <div data-name="Paper" class="selection">Paper</div>
    <div data-name="Scissors" class="selection">Scissors</div>
    <div class="round">Play a round</div>

The event listener was not removed. Debugging tool showed the selection.clickHandler property is undefined when playerSelection is called.

When I go back to playRound function, I'm sure that selection.clickHandler attribute well setted.

Anyone knows what's wrong?

score 1 · Accepted Answer · answered Feb 04 '22 at 20:02

Just store your handler before adding the eventListener:

const playerSelection = function(selected, selections) {
    selected.id = 'selected';
    selections.forEach((selection) => {
        selection.classList.remove('listening');
        // get the anonymous event handler by cached reference
        selection.removeEventListener('click', selection.clickHandler, false);
    }); 
}

const playRound = function() {
    const selections = document.querySelectorAll(".selection");
    selections.forEach((selection) => {
        selection.id = undefined;
        selection.classList.add('listening');
        selection.clickHandler = function() {
            playerSelection(selection, selections);
        }
        selection.addEventListener('click', selection.clickHandler, false);
    });
};

const round = document.querySelector(".round");
round.addEventListener('click', playRound);

.selection,
.round {
    width: 100px;
    height: 50px;
    border: 1px solid black;
    background-color: white;
}

.selection.listening {
    background-color: yellow;
}

#selected {
    background-color: red;
}

<div data-name="Rock" class="selection">Rock</div>
    <div data-name="Paper" class="selection">Paper</div>
    <div data-name="Scissors" class="selection">Scissors</div>
    <div class="round">Play a round</div>

it works. I wonder what's the difference between "store before" and "store after". Why the reference is not stored if I save it after adding the event listener. — shen, Feb 04 '22 at 20:35
@shen, when you're trying to store `clicked` within itself, it's not visible from within and you're getting undefined as `clicked` is not defined in the function's scope. — Kosh, Feb 04 '22 at 20:41

Failed to store the reference of event handler (I want to remove the event listener)

1 Answers1

Linked