What is better in terms of performance when adding an EventListener to a EventTarget in JS?

Viewed 41

I'm currently learning JavaScript and was learning about callback functions.

My question is that what is better to use, when passing a function to addEventListener.

addBtn1.addEventListener('click', function() {
    console.log('inline'); //inline
})

addBtn2.addEventListener('click', () => {
    console.log('anonymous inline'); //anonymous
})

const doSomething = function() {
    console.log('do something')
}

addBtn3.addEventListener('click', doSomething); //named function

Since each function is an object, every time I press addBtn1 and addBtn2, will new functions be created in Memory?

Also if we want to pass some parameters, what is better to use .bind() or the inline approach? Considering I understand the behavior of this in anonymous vs normal inline function.

0 Answers
Related