General way to provide the event argument in a function in JavaScript

Question

I am declaring the event argument for years and years on roughly the same manner:

 element.onclick = function(e){};
 element.onclick = function(event){};

 element.addEventListener("click", function(e){}, false);
 element.addEventListener("click", eventHandler, false); //preferred version

 function eventHandler(e){} 

 etc.

• Does it have to be e or event .
• Is it appended as the last argument or can it also be the first?

Can you do this:

 function eventHandler(e, a, b, c, d){}

Is e still referring to the event or is it d ?

Or to make the above work you need to explicitly use the keyword event ?

So the general question is: What are the rules of thumb when it comes to declaring the event argument within a function in JavaScript?

Answer 1

In the following I assume you are referring to about DOM events handlers.

Does it have to be e or event .

It doesn't matter. It could be ajdlahksjd for all we care.

Is it appended as the last argument or can it also be the first?

The event object will always be passed as first argument to the handler.

Can you do this:

  function eventHandler(e, a, b, c, d){} 

Is e still referring to the event or is it d ?

It depends on how you bind the event handler. If you just assign it it will be e . If you already bind other values to the parameters, eg via .bind , it will be the first un-bound parameter. However, that doesn't really have anything to do with event handlers. The event handler itself will also get the event object as first argument.

Or to make the above work you need to explicitly use the keyword event ?

event is not a keyword. You can name the parameter however you want to.

What are the rules of thumb when it comes to declaring the event argument within a function in JavaScript?

There is none. There is no magic statically inspection of your event handler. It's simply a function that accepts an argument, that's it.

However, there is certainly a convention to name the parameter e or event , simply because it's reasonable name for a variable that represents an event object.

Answer 2

Personally, I think there's no rule about this, but the great Nicholas Zakas, in his book Maintainable JavaScript , tells that if you want to have a function easy to test and maintain, you never have to declare the event as follows:

function myFunction(event) {}

Instead, you'd have to declare the arguments that the function needs:

function myFunction(clientX, clientY) {}

And when you call the function, you must pass the arguments from the object event:

// This won't work on IE8 and older versions.
element.addEventListener('click', function(event) {
    myFunction(event.clientX, event.clientY);
}, false);

When you or another guy from your team have to test this function, s/he doesn't need to emulate any event.