Overload event handler in JavaScript

Question

I've got an event handler in JavaScript that I'd like to overload:

function overloadedHandler(event, myObject){
    if(event){
        var elem = event.currentTarget;
    } else {
        var elem = myObject.x;
    }
    //function logic
}

$('.mydiv').on('click', overloadedHandler);

If I want to call the overloadedHandler from another function (not as an event handler), what's the right way to do it?

overloadedHandler(null, obj);
overloadedHandler(undefined, obj);
overloadedHandler(false, obj);

P.S. I understand that I could put //function logic part in another function & call that when needed outside of an event handler, but I would like to know if there's anything wrong with the above approach?

I don't really understand what you want to do, but you could check inside the overloadedHandler for the type of the first argument using typeof. — Dänu
– Dänu, Commented Apr 20, 2014 at 15:01
@dfsq : Any of 1, 2 or 3 are wrong? With your method, if I'm using the event further down in the logic, I won't be able to distinguish if the call was from the event or otherwise. Granted that I didn't mention in my Q that I'd like to distinguish between the function calls — user
– user, Commented Apr 20, 2014 at 15:22
@buffer I wouldn't call it wrong. Clumsy, maybe. But this is up to your taste. — dfsq
– dfsq, Commented Apr 20, 2014 at 15:23

Djizeus · Accepted Answer · 2014-04-20 15:01:44Z

1

Well indeed it seems a bit odd at first sight, but I would say that there is nothing wrong. It is basically equivalent to having an argument as optional, except that the event handling mechanism forces you to define the event as first argument so you cannot make it optional.

To make it as close as possible to an optional argument, I would set the event as undefined when calling it not as an event handler, since this is what the value would be if it was an optional argument. null would also be OK I guess, but I think false is semantically wrong: you want to say that there is no event, not that the event is false.

One way to make it maybe even cleaner would call it with an event argument made for the purpose. In your example, that would be:

overloadedHandler({currentTarget: obj.x}, obj);

answered Apr 20, 2014 at 15:01

Djizeus

4,1751 gold badge26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user Over a year ago

Agreed. However in your example, if I'm using the event further down in the logic, I won't be able to distinguish if the call was from the event or otherwise. Granted that I didn't mention in my Q that I'd like to distinguish between the function calls.

Djizeus Over a year ago

I see, that makes the approach a bit "wronger" :) You usually want a function to do something defined that does not depend on the caller, otherwise it is less re-usable. But you can use the undefined approach, or: {currentTarget: obj.x, doThatSpecificThingForNonHandler: true}.

user Over a year ago

Could you elaborate on function ... does not depend on the caller. Isn't function overloading all about re-using the code depending on who's calling it.

Djizeus Over a year ago

Technically overloading is changing the behaviour of a function depending on the signature (in JS: parameters). So in JS it translates to having optional parameters. Once a particular logic is defined, you don't want it to depend on who is calling, but rather on how it is called. Granted, the difference may be subtle if each caller has a unique way of calling, but thinking of it that way helps designing I think.

J.Wells · Accepted Answer · 2014-04-20 15:30:36Z

In javascript, null, undefined, and false are all falsey, therefore event in if (event) will evaluate as false anytime those values are passed into that function via that parameter. There is nothing wrong with it any way you do it since it's simple evaluation. Unless you want to do different things with null, undefined, or false in the function (or there are extenuating circumstances like specific conventions, 'use strict' usages, etc), it doesn't matter much.

volter9 · Accepted Answer · 2014-04-20 15:17:02Z

0

You can reuse the following function just by setting first argument that something is false, as you pointed you can use any of those.

overloadedHandler(null, obj);
overloadedHandler(undefined, obj);
overloadedHandler(false, obj);

All of them would be fine. But I would use 'null', although it's subjective opinion.

edited Apr 20, 2014 at 15:17

answered Apr 20, 2014 at 14:59

volter9

7356 silver badges16 bronze badges

1 Comment

user Over a year ago

Why is null better?

Collectives™ on Stack Overflow

Overload event handler in JavaScript

3 Answers 3

4 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Related