How to make a wrapper function in javascript?

Question

I have a lot of click handler like below:

$(document).on('click','.xxxBtn', function(e){
    ....
})

I want to action a cookies saving in some of them.
I can write like below:

function defaultHandler (e, callback) {
    callback(e);
    doSomeJobs();
}

$(document).on('click','.xxxBtn', defaultHandler(e,function(e){
    `diferent code in each Btn`
    ....
})

But I think it would be nice to use a handle like(just look more nice and clear) :

$(document).on('click','.xxxBtn', defaultHandler(e){
    `diferent code in each Btn`
    ....
})

Is it possible to achieve this?

update
em, maybe my example is a little ambiguous.
I mean that if I can make a defaultHandler as what the function statement do in javascript? Just function(e){...} to defaultHandler(e){...}

Answer 1

Short answser:
No, there is no way to tell it defaultHandler(e){...}

Longer answer:

It is possible to achieve something very similar to it. What you need are higher order functions, which are functions that return functions. Yes, such a thing is possible in JS, and even necessary to write clean, concise code.

First, let's start with a simple example. You want to have exactly the same handler shared for everything

var logArgs = function (e) {
    console.log(arguments);
}

$(document).on('click', '.btn', logArgs);

You can use that function as often as you want as an event handler. It'll always work. But let's assume you need some more specific logic. Maybe you'd like to identify the output by always prepending a certain string.

var namedLogger = function (name) {
    return function (e) {
        console.log(name, arguments);
    }
};

$(document).on('click', '.btn', namedLogger('firstButton'));
$(document).on('click', '.btn2', namedLogger('secondButton'));

As you can see, we call the function namedLogger with a name, which it remembers. Then it returns a new function, which is then used as the event handler. When invoked later, your logger callback will have access to the name through the closure scope and log it before the arguments.

You can go crazy with that kind of pattern, and it is actually encouraged. It's the best way to write reusable event handler code in JS.

To make this more relevant for your use case:

var cookieSetter = function (eventHandler) {
    var setCookie = function (key, value) {
        document.cookie = key + '=' + value + ';';
    };

    return function (e) {
        setCookie('whatever', e.something);
        eventHandler(e);
    };
};

$(document).on('click', '.btn', cookieSetter(function (e) {
    console.log('Event triggered', e);
});

Answer 2

I'm not 100% sure I understand your issue, but maybe you're looking for something like this:

function defaultHandler(callback) {
    return function(e) {
        callback(e);
        doSomeJobs();
    }
}

Then use it like

$(document).on('click', '.xxxBtn', defaultHandler(function(e) {});

Answer 3

defaultHandle(e){...} is incorrect syntax, you can't.

Use something like followed:

function getHandler(flag, next) {
 if (flag) 'store cookies';
 return next;
}

$(document).on('click','.xxxBtn', getHandler(true, function(e){

}));