Do JavaScript bindings take up memory while not in use?

I have a calendar that I’ve built, and on clicking a day on the calendar, a function is run. You can go month to month on the calendar, and it generates months as it goes. Since every day on the calendar, shown or not, is binded to an event using the class of all the “days,” I’m worried about the number of “bindings” building up into the thousands.

//after a new month is generated, the days are rebound
TDs.off("mousedown");
TDs = $(".tableDay");
TDs.on("mousedown", TDmouseDown);

While I was learning C#/Monogame, I learned about functions that repeat very quickly to update game elements. So, I was wondering if JavaScript works in the same manner. Does the JavaScript engine repeatedly check every single event binding to see if it has occurred? So a structure something like this:

function repeat60timesPerSecond(){
 if(element1isClicked){ //blah }
 if(element2isClicked){ //blah }
 if(element3isClicked){ //blah }
}

Or is JavaScript somehow able to actually just trigger the function when the event occurs?

In short: Do JavaScript bindings take up memory solely by existing?

My (inconclusive) research so far:

I have made several attempts at answering this question on my own. First, I did a jsperf test. Apart from the obvious problems with consistency in my test, the test didn’t actually test this question. It primarily tested if unbinding nothing was faster than unbinding something. Rather than how much memory the actual bindings take up after creation. I couldn’t come up with a way to test this using this testing service.

I then googled around a bit, and found quite a bit of interesting stuff, but nothing directly answering this question in clear terms. I did come across this answer, which suggests using a single event binding of the event container in a similar situation.

UPDATE:

Right after posting this, I thought of a possible way to test this with local JS:

function func(){
    console.log("test");
}
for(x=1;x<1000;x++){
    $('#parent').append("<div id='x"+x+"' class='child'></div>");
    $("#x"+x).on("mousedown", func);
}

console.time("timer");

for(i=1;i<1000000;i++){
    q = Math.sqrt(i);
    if(q % 1 == 0){
        q = 3;
    }
}

console.timeEnd("timer");

After playing around with this(changing what the for loop does, changing the number of iterations on both for loops, etc.) it appears that event bindings take up a VERY small amount of memory.

Answer

Yes, they all take up memory, but not very much. There’s just one function object. Each element has a pointer to that object, so it’s probably something like 4 bytes per element.

As Felix King suggested, you can reduce this by using delegation, as there’s just a single binding to a container element. However, the savings in memory is offset by increased time overhead — the handler is invoked every time the event occurs anywhere in the container, and it has to test whether the target matches the selector to which the event is delegated.

Advertisement

Answer