In javascript / jQuery, what does (e) mean?

I am new to JavaScript / jQuery and I have been learning how to create functions. Many functions (e) appeared in brackets. Let me show you what I mean:

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

It always seems that the function does not even use the value (e), so why is it so common?

+82
javascript function jquery parameter-passing parameters
Apr 25 2018-12-12T00:
source share
9 answers

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

An event object essentially has many interesting methods and properties that can be used in event handlers.

The example you 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 links:

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

+93
Apr 25 '12 at 20:40
source share

DISCLAIMER: This is a very late answer to this specific post, but since I read various answers to this question, it seemed to me that most of the answers use terminology that only experienced coders can understand. This answer is an attempt to consider the original question, taking into account the novice audience.

Introduction

The little thing (e) is actually part of a wider area of ​​something in Javascript called an event-handling function. Each event handling function receives an event object. For the purposes of this discussion, think of an object as a “substance” that contains a bunch of properties (variables) and methods (functions), like objects in other languages. The e handle inside a small (e) thing is like a variable that allows you to interact with an 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 triggers this action).
  • "click" is an event (when a selected item is clicked).
  • "function (e)" is an event processing function (when creating an event, object).
  • "e" - the handler of the object (the object becomes available).
  • "preventDefault ()" is the method (function) provided by the object.

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

Note. The pen can be named as you like (i.e. the function (billybob) ")." E "means" event ", which seems 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 through the event handler.

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

+38
Sep 22 '16 at 22:26
source share

e does not really matter. It is simply a convention to use e as the name of a function parameter when the event parameter.

It could be

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

.

+29
Apr 25 '12 at 20:45
source share

In this example, e is just a parameter for this function, but it is an event object that passes through it.

+7
Apr 25 2018-12-12T00:
source share

The argument e is short for the event object. For example, you can create code for anchors that overrides the default action. To do this, you should write something like:

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

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

Although you can often see it, this is not something you need to use in a function, even if you specify it as an argument.

+7
Apr 25 2018-12-12T00:
source share

In jQuery e short for event is the current event object. It is usually passed as a parameter to the event function that should be fired.

Demo: jQuery Events

In the demo, I used e

 $("img").on("click dblclick mouseover mouseout",function(e){ $("h1").html("Event: " + e.type); }); 

I could also use event

  $("img").on("click dblclick mouseover mouseout",function(event){ $("h1").html("Event: " + event.type); }); 

Same!

Programmers are lazy, we use a lot of abbreviations, partly it reduces our work, partly helps with readability. Understanding this will help you understand the coding mentality.

+4
Oct 28 '15 at 17:39
source share

Today I just wrote a post about "Why are we using letters like" e "in e.preventDefault ()?" and I think my answer will make sense ...

First, consider the syntax addEventListener

Usually it will be: target.addEventListener (type, listener [, useCapture]);

And the definition of addEventlistener parameters:

type : A string representing the type of event to listen on.

listener : an object that receives a notification (an object that implements the Event interface) when an event of the specified type takes place. It must be an object that implements the EventListener interface or JavaScript function.

(from MDN)

But I think one thing needs to be noted: When you use the Javascript function as a listener, an object that implements the Event interface (object event) is automatically assigned to the first parameter of the function. Therefore, if you use function (e), the object will be assigned” e "because" e "is the only parameter to the function (definitely the first one!), then you can use e.preventDefault to prevent something ....

try an example as shown below:

 <p>Please click on the checkbox control.</p> <form> <label for="id-checkbox">Checkbox</label> <input type="checkbox" id="id-checkbox"/> </div> </form> <script> document.querySelector("#id-checkbox").addEventListener("click", function(e,v){ //var e=3; var v=5; var t=e+v; console.log(t); e.preventDefault(); }, false); </script> 

the result will be: [object MouseEvent] 5 , and you will prevent the click event.

but if you remove the comment mark, for example:

 <script> document.querySelector("#id-checkbox").addEventListener("click", function(e,v){ var e=3; var v=5; var t=e+v; console.log(t); e.preventDefault(); }, false); </script> 

you get: 8 and the error : "Untrained TypeError: e.preventDefault is not a function in HTMLInputElement. (VM409: 69)."

Of course, the click event will not be prevented this time. Because "e" was again defined in the function.

However, if you change the code to:

 <script> document.querySelector("#id-checkbox").addEventListener("click", function(e,v){ var e=3; var v=5; var t=e+v; console.log(t); event.preventDefault(); }, false); </script> 

every thing will work fine again ... you will get 8 and the click event will be prevented ...

Therefore, "e" is just a parameter of your function, and you need an "e" in your function () to get the "event object", and then do e.preventDefault (). This is also the reason that you can change the "e" to any words that are not reserved by js.

+4
Apr 19 '17 at 9:32
source share

This is a link to the current event object.

+2
Apr 25 2018-12-12T00:
source share
 $(this).click(function(e) { // does something }); 

Referring to the code above
$(this) is an element that is like some variable.
click is an event that needs to be executed.
the e parameter is automatically passed from js to your function, which contains the value $(this) and can be used in your code to perform some operations.

-one
Aug 08 '19 at 12:35
source share



All Articles