Am I using the callback function correctly?

Question

I've just learned to use callback functions, and this is the way I'm using them:

//click event function 
function elementClick(element, callback) {
    element.addEventListener("click", function(){
        callback();
    });
}

This allows me to simply trigger a function when an element is clicked like so:

elementClick(modalSkipBtn, loadNewCombination);

Is this the correct way to be using the callback function? My code is working fine - I am just wondering if this is a appropriate use for this function.

Answer 1

Yes the implementation is correct. You could also simple write element.addEventListener("click",callback);

Or if your function is loadNewCombination()

element.addEventListener("click",loadNewCombination);

Answer 2

You can simply use element.addEventListener("click", callback) . The reason is that you can pass the function without invoking it (ie adding () after its name). addEventListener accepts a second argument which is a function in the same exact way your elementClick accepts it. and call it within.

Answer 3

You can do element.addEventListener("click", callback); instead, it's easier. Use you method only when your callback needs a parameter. Example:

element.addEventListener("click", function(){
    callback(i);
});
function callback(i) {
    return i * 2
}