Redeclaration of Event Listener

I have an annoying problem where unless I re-declare an event framework the latent bug that has been lurking for a while, surfaces. The bug is my problem to sort out, but I need an answer to something I can’t find on the internet despite trying.

Question: If you re-declare or effectively add a duplicate set of eventListeners by calling a function say, as per my code below, does the event object framework just get overwritten or are there multiple declarations that could cause memory issues and recursion problems etc. I know it’s stupid idea, but is it harmless? 🙂

Here is a segment of code I need to call each time the user clicks on a video (the actual code is much longer):

     var numItems = 2;
     for (var i = 1; i <= numItems; i++) {
        popUpPlayer[i] = document.getElementById("myPlayer_" + i);
        playButton[i] = document.getElementById("play-pause_" + i);
        seekBar[i] = document.getElementById("seek-bar_" + i);
        popUpPlayer[i].onplay = onplayCallback(i)
        popUpPlayer[i].onpause = onpauseCallback(i)
        popUpPlayer[i].onseeked = onseekedCallback(i)
        popUpPlayer[i].onseeking = onseekingCallback(i)
        popUpPlayer[i].onended = onendedCallback(i)
        popUpPlayer[i].ontimeupdate = ontimeupdateCallback(i)
        popUpPlayer[i].onvolumechange = onvolumechangeCallback(i)
        popUpPlayer[i].onloadstart = onloadstartCallback(i)
        popUpPlayer[i].onplaying = onplayingCallback(i)
    }
    function onplayCallback(index) {
        playButton[index].addEventListener("click", function (e) {
            var $span = $(e.target);
            if (popUpPlayer[index].paused == true) {
                $span.removeClass('glyphicon-play').addClass('glyphicon-pause');
                popUpPlayer[index].play();
                ani_userPaused[index] = false;
            } else {
                $span.removeClass('glyphicon-pause').addClass('glyphicon-play');
                popUpPlayer[index].pause();
                userPaused[index] = true;
            }
       });
    }

>Solution :

Answer: No

If you go to the MDN docs for addEventListener you can see a section which states

Note: If a particular anonymous function is in the list of event listeners registered for a certain target, and then later in the code, an identical anonymous function is given in an addEventListener call, the second function will also be added to the list of event listeners for that target.
Indeed, anonymous functions are not identical even if defined using the same unchanging source-code called repeatedly, even if in a loop.
Repeatedly defining the same unnamed function in such cases can be problematic. (See Memory issues, below.)

And in your case you are, in fact, using anonymous functions.

So it is in your best interest to avoid this duplication, especially in your case, which seems to have quite a few events, and add removeEventListener to your cleanup functions.