In Javascript/jQuery what does (e) mean?

Question

I am new to JavaScript/jQuery and I've been learning how to make functions. A lot of functions have cropped up with (e) in brackets. Let me show you what I mean:

$(this).click(function(e) {
    // does something
});

It always appears that the function doesn't even use the value of (e), so why is it there so often?

Solution 1

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

Solution 2

DISCLAIMER: This is a very late response to this particular post but as I've been reading through various responses to this question, it struck me that most of the answers use terminology that can only be understood by experienced coders. This answer is an attempt to address the original question with a novice audience in mind.

Intro

The little '(e)' thing is actually part of broader scope of something in Javascript called an event handling function. Every event handling function receives an event object. For the purpose of this discussion, think of an object as a "thing" that holds a bunch of properties (variables) and methods (functions), much like objects in other languages. The handle, the 'e' inside the little (e) thing, is like a variable that allows you to interact with the object (and I use the term variable VERY loosely).

Consider the following jQuery examples:

$("#someLink").on("click", function(e){ // My preferred method
    e.preventDefault();
});

$("#someLink").click(function(e){ // Some use this method too
    e.preventDefault();
});

Explanation

• "#someLink" is your element selector (which HTML tag will trigger this).
• "click" is an event (when the selected element is clicked).
• "function(e)" is the event handling function (on event, object is created).
• "e" is the object handler (object is made accessible).
• "preventDefault()" is a method (function) provided by the object.

What's happening?
When a user clicks on the element with the id "#someLink" (probably an anchor tag), call an anonymous function, "function(e)", and assign the resulting object to a handler, "e". Now take that handler and call one of its methods, "e.preventDefault()", which should prevent the browser from performing the default action for that element.

Note: The handle can pretty much be named anything you want (i.e. 'function(billybob)'). The 'e' stands for 'event', which seems to be pretty standard for this type of function.

Although 'e.preventDefault()' is probably the most common use of the event handler, the object itself contains many properties and methods that can be accessed via the event handler.

Some really good information on this topic can be found at jQuery's learning site, http://learn.jquery.com. Pay special attention to the Using jQuery Core and Events sections.

Solution 3

e doesn't have any special meaning. It's just a convention to use e as function parameter name when the parameter is event.

It can be

$(this).click(function(loremipsumdolorsitamet) {
    // does something
}

as well.

Solution 4

In that example, e is just a parameter for that function, but it's the event object that gets passed in through it.

Solution 5

The e argument is short for the event object. For example, you might want to create code for anchors that cancels the default action. To do this you would write something like:

$('a').click(function(e) {
    e.preventDefault();
}

This means when an <a> tag is clicked, prevent the default action of the click event.

While you may see it often, it's not something you have to use within the function even though you have specified it as an argument.

View more solutions

Comments

[SpYk3HH]

lol, this almost seems like a silly question, but never the less, it's in the right place., You might want to further you answer with an example of its use compared to regular js (not that there is a dif, but how it's used in jQuery in similarity to js)

[Selvakumar Arumugam]

@SpYk3HH Agreed. Planning to do so.

[Adam Youngers]

@SelvakumarArumugam So I'm not so sure they are the same thing. It seems one returns w.Event and the other returns MouseEvent. For the example above I think they are similar enough, but in the case of $(document).on('click', '.btn', e=> { console.log(e); console.log(event)}); the two are different. Specifically for e.currentTarget and event.currentTarget. In this case e.currentTarget will give you what you need, but event.currentTarget returns document and not the button you clicked on.

[Adam Youngers]

Looking at the responses I would say that event === e.originalEvent, and that e contains a bit more detail.

[Adam Youngers]

learn.jquery.com/events/introduction-to-events/…

[Gerben Jongerius]

e on a click handler contains the javascript event of the clicked element and not the value of $(this).