闭包如何在 addEventListener 中工作？

Question

I got this code:

 function getElementByName(name) { return document.querySelector(name); } function removeButton(parentToClick) { parentToClick.addEventListener('click', e => { let buttonToClick = e.target; const removeButton = getElementByName(`.remove`); removeButton.addEventListener('click', e => { console.log(e.target); remove(buttonToClick); }); }); } function remove(buttonToClick) { return buttonToClick.remove(); } removeButton(getElementByName(`#menu`));

 <div id="menu"> <button data-action="save">Save</button> <button data-action="load">Load</button> <button data-action="search">Search</button> </div> <button class="remove">Remove</button>

When I click on the "remove" button the previous clicked one, for example, the save button, is taken from closure and then it's removed as expected. The problem is when I cliсk on another button, for instance, the search button and then click on the "remove" button, the closure has the save button rather than the search button. I'd like to know why it happens.

Answer 1

So what happens:

1. You click on a search. It binds an event listener to remove.
2. You click on remove, it removes search from event listener in 1.
3. You click on save. It binds an event listener to remove.
4. You click on remove, it calls the event listener 1, and calls event listener from 3.

You are assuming that somehow the click event is only bound to that one element. The fact is you bound the click multiple times and it has no clue it is only supposed to be fired.

What can you do? Remove the event before binding another. Or better, store what is clicked and do not bind multiple events.

 function removeButton(parentToClick) { let buttonToClick = null; parentToClick.addEventListener('click', e => { buttonToClick = e.target.closest('button[data-action]'); }); const removeButton = document.querySelector('.remove'); removeButton.addEventListener('click', e => { if (buttonToClick) remove(buttonToClick); buttonToClick = null; }); } function remove(buttonToClick) { return buttonToClick.remove(); } removeButton(document.querySelector('#menu'));

 <div id="menu"> <button data-action="save">Save</button> <button data-action="load">Load</button> <button data-action="search">Search</button> </div> <button class="remove">Remove</button>