What exactly is the parameter e (event) and why pass it to JavaScript functions?

Question

Well, when I learned JavaScript, all the books and Internet articles I read showed code passing a parameter e to functions that handle JavaScript events, such as the code block below:

function myEvent(e) {     var evtType = e.type     alert(evtType)     // displays click, or whatever the event type was } 

I've always accepted that as being the way it is, but now I have some questions (this is very confusing to me):

1. Where does this e come from? When I look at the entire JavaScript file, e does not seem to exist at all.
2. Why pass this parameter e to functions? Will functions stop working if I do not pass e to them?

3. Consider the code block below. There is an event variable (e) passed to an anonymous inner function. Let's say I want to use an event object outside of the anonymous function (maybe in a line above/below the element.onkeypress line). How can I do this?

   element.onkeypress = function(e) {     if(e.keyCode) {         element.keyCode = e.keyCode;     } else {         element.keyCode = e.charCode;     } }; 

Answer 1

The e is short for event

The simplest way to create an event is to click somewhere on the page.

When you click, a click event is triggered. This event is actually an object containing information about the action that just happened. In this example's case, the event would have info such as the coordinates of the click (event.screenX for example), the element on which you clicked (event.target), and much more.

Now, events happen all the time, however you are not interested in all the events that happen. When you are interested in some event however, it's when you add an event listener to the element you know will create events[1]. For example you are interested in knowing when the user clicks on a 'Subscribe' button and you want to do something when this event happens.

In order to do something about this event you bind an event handler to the button you are interested in. The way to bind the handler to the element is by doing element.addEventListener(eventName, handler).

eventName is a string and it's the name of the event you are interested in, in this case that would be 'click' (for the click event).

The handler is simply a function which does something (it's executed) when the event happens. The handler function, by default, when executed is passed the event object (that was created when the event/action you are interested in happened) as an argument.

Defining the event as a parameter of your handler function is optional but, sometimes (most times), it is useful for the handler function to know about the event that happened. When you do define it this is the e you see in the functions like the ones you mentioned. Remember, the event is just a regular javascript object, with lots of properties on it.

Hope that helped.

For more info read Creating and Triggering Events

As for your 3rd question, now you should know you cannot do that, because e only exists when an event happens. You could have the handler function, which has access to the e object when it gets executed, to store it in some global variable and work on that.

[1] That is not exactly correct, but it's simpler to understand. The more correct thing to say there is "add an event listener to the element you know will have events flow through it". See this for more information

Answer 2

The parameter e that you are asking about is an Event object, and it represents the event being fired which caused your function to be executed. It doesnt really have to be e, you can name it anything you want just like all other function parameters.

1. Where does this e come from? When I look at the entire javascript file, e does not seem to exist at all.

You won't be able to find this e variable in your javascript file because it's really not there at all, but comes from the javascript engine executing your callback function.

When you give a callback function for some event (e.g. element.onkeypress = function(e) { ... }), you are giving the javascript engine a function to execute/call when that event fires, and when it executes/calls your callback function it passes along an Event object representing the event that just happened. Javascript could be doing something like this to call your callback function:

var e = new Event(); callbackFunction(e); 

and that's where the Event object e comes from.

2. Why pass this parameter e to functions? Will the function stop working if I do not pass e to it?

The function will not stop working if you don't have the e parameter in it. But if you need to access some details about the event that caused your function to be executed, you are going to need the e parameter to get them.

3. Consider the code block below, there is an event variable(e) passed to an anonymous inner function. Lets say I want to use event object outside of the anonymous function(maybe in a line above/below the element.onkeypress line), how can I do this?

I dont think you can do this, even if you store it in a variable outside the scope of your callback function. This is because your function is not executed right away when you declare it, but instead only when the event is fired (e.g. a key is pressed, firing the 'keypress' event).

var event;  element.onkeypress = function(e) {     event = e;     ... };  console.log(event); // => undefined 

The only way this could work is when the code that uses the event variable also gets executed later, specifically after the anonymous function given to onkeypress gets executed. So the code below could work:

var event;  element.onkeypress = function(e) {     event = e;     ... };  setTimeout(function() {     console.log(event); // => the event object, if the `keypress` event                         //    fired before `setTimeout` calls this function }, 100000); // <= set to very large value so that it gets run way way later