AddEventListener doesn't duplicate named functions
When adding an event listener to a target in javascript, using the EventTarget.addEventListener
function allows you to add a listener without clobbering any others that may be registered to that target. This is really nice and all, but if you have a script that may or may not be reloaded multiple times you can end up with this function getting called quite a bit.
If you're like me and you use anonymous functions like they're going out of style, then you can end up attaching multiple handlers, because they aren't recognized as the same function, eg
const div = document.createElement('div');
div.addEventListener('click', event => (fetch('mutate/thing'));
This could end up running the fetch
the same number of times that the script is loaded. If instead you do:
function mutateMyThings(event) { fetch('mutate/thing') };
div.addEventListener('click', mutateMyThings);
Then you don't have to worry about it, since adding a named function will automatically only add it once.
Tweet