What Exactly Is the Parameter E (Event) and Why Pass It to JavaScript Functions

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

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

Can someone please explain what (e) is doing and as well as the target object?

The e parameter contains the Event Object, passed to your event Handler function.
Inside the event object you'll find relevant data relative to the triggered event.

From MDN Web docs:

DOM Events are sent to notify code of interesting things that have
taken place. Each event is represented by an object which is based on
the Event interface, and may have additional custom fields and/or
functions used to get additional information about what happened.
Events can represent everything from basic user interactions to
automated notifications of things happening in the rendering model.

If we are talking about a click event, for exampke, e.target would be a reference to the DOM Element wich received the click. Wich corresponds in this case with the value of this, inside the handler scope

---

You can find more information about Events here:

https://developer.mozilla.org/en-US/docs/Web/Events

When to pass event as parameter in functions (Javascript)?

You don't pass the event, it is done automatically by the browser in all standard event triggers. The question is do you need to receive the event as a named argument in all your functions and the answer to that is, it all depends on whether you are going to want to use it:

When you will need access to the event:

element.addEventListener("click", foo);

// You can explicitly declare a function argument that will represent
// the event object that is automatically passed to you by the browser
function foo(evt){
  // And, then you can access the event in the function
  evt.xyz...
}

When you won't need access to the event:

element.addEventListener("click", foo);

// The event is still passed to the function, but now, you don't
// have an explicit way to access it:
function foo(){

}

Again, the event will be passed in all circumstances, so it's not going to improve or decrease performance if you decide to capture the reference with an argument. As a general rule of thumb to get started, it's probably a good idea to get into the habit of adding a named argument for it, so that if you need access to it, you can get it easily.

Why do you have to pass the event object as a parameter?

The Ever-Present Event, Whether You Like it or Not

The event is always present, even when you don't provide a name:

$(".foo").on("click", function(){
  alert( arguments[0].type );
});

That is the same as saying this:

$(".foo").on("click", function(event){
  alert( event.type );
});

The event object is already being passed to your callback (whether your provide a name for it or not), you can choose to not use it if you like. For instance, if we looked to a jQuery onClick method:

$(".foo").on("click", function(){
  /* Do stuff */
});

Making Use of It

You'll note that I have no event object referenced in my callback. I'm not required to. However, if I want to use it, for whatever purpose, I should give it a name:

$(".foo").on("click", function(myEvent){
  myEvent.preventDefault();
  myEvent.stopPropagation();
});

Now that I have granted myself access to the event details, I can prevent the default behavior that would result from the event, and I can also stop the event from bubbling up the DOM to other elements.

Practical Example

Suppose we wanted to listen for click events on an element:

$("#bigSquare").on("click", function(event){
  /* Do something */
});

Click events happen on an element when you click the element itself, or any of its children. Now suppose this element had two children:

<div id="bigSquare">
  <div id="redSquare"></div>
  <div id="blueSquare"></div>
</div>

Clicking any of these, the big square, the red square, or the blue square will cause the "click" event on the big square - after it causes the click event on whichever element you clicked first (events bubble up the DOM).

We could determine which element was the target in any click event via the event itself:

$("#bigSquare").on("click", function(event){
  alert( event.target.id );
});

Note here how we're accessing the ID of the target that raised the event. If you click on the red square, when that event bubbles up to the big square, we will see alerted "redSquare". The same goes for the blue square. If you click that, the event will bubble up to the big square and we will see alerted "blueSquare".

You can test this online via the following demo: http://jsbin.com/ejekim/edit#javascript,live

Try clicking the orange, red, or blue square to see what is alerted.

In Javascript/jQuery what does (e) mean?

e is the short var reference for event object which will be passed to event handlers.

The event object essentially has lot of interesting methods and properties that can be used in the event handlers.

In the example you have posted is a click handler which is a MouseEvent

$(<element selector>).click(function(e) {
    // does something
    alert(e.type); //will return you click
}

DEMO - Mouse Events DEMO uses e.which and e.type

Some useful references:

http://api.jquery.com/category/events/

http://www.quirksmode.org/js/events_properties.html

http://www.javascriptkit.com/jsref/event.shtml

http://www.quirksmode.org/dom/events/index.html

http://www.w3.org/TR/DOM-Level-3-Events/#event-types-list

---

Related Topics