Why do we use the letters like "e" in e.preventDefault()? (I think I have an more detailed answer than other post )

Question

At first,let us see the syntax of addEventListener

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

And the definition of the parameters of addEventlistener are:

type ：A string representing the event type to listen out for.

listener ：The object which receives a notification (an object that implements the Event interface) when an event of the specified type occurs. This must be an object implementing the EventListener interface, or a JavaScript function.

(From MDN)

But I think there is one thing should be remarked: When you use Javascript function as the listener, the object that implements the Event interface(object event) will be automatically assigned to the "first parameter" of the function.So,if you use function(e) ,the object will be assigned to "e" because "e" is the only parameter of the function(definitly the first one !),then you can use e.preventDefault to prevent something....

let us try the example as 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 sign like :

<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 will get : 8 and an error:"Uncaught TypeError: e.preventDefault is not a function at HTMLInputElement. (VM409:69)".

Certainly,the click event will not be prevented this time.Because the "e" was defined again 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 propertly again...you will get 8 and the click event be prevented...

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

Answer 1

It might be easier to understand if you write a pseudo addEventListener function, and take a look how it's structured.

The function takes two parameter, a string name and a callback function listener. It will creates an event and use it as a first parameter in the function you passed to it.

var addEventListener = function(name, listener) {
  var event = {
    name: name,
    preventDefault: function() {
      alert('preventDefault will stop you from checking this checkbox!')
    }
  };
  if (typeof listener === 'function') listener(event);
}


addEventListener('click', function(whatevernameyouwant) {
  whatevernameyouwant.preventDefault();
})

Answer 2

The answers so far are not strictly correct.

The "e", in your code is one of the parameters (and only parameter) of the function that you are attaching to the event "click" of the DOM (jQuery) object.

Notice that you can either define the function inside the "addEventListener" or have it as a pointer* (assign the function to a variable).

In any case, YOUR code defined the function as:

function(**e**){
    alert("preventDefault will stop you from checking this checkbox!")
    **e**.preventDefault();
}

It's your call on how you want to name your variables/parameters/functions.

For that function (which is and event handler function), the parameter is an object of type "Event" (more here). To shorten the name of the parameter, most people would just use the letter E(vent).

Is not a standard defined anywhere. It's not "good practice" per se (if you want make your javascript code short, you probably want to use a minifier tool). But is broadly used and easily understandable.

Now answering:

NO, is not a syntax requirement and YES, you can use any letter or any word, as long is not a reserved word and is not affecting the closure of the function (i.e. it's matching another variable defined outside the function).

Answer 3

Convention. You can put whatever you want there.

If you're wondering why you can put whatever you want in there, that's how dynamically typed languages work. You don't need to state the type because it's determined at runtime instead of compile time.

Answer 4

Because the shorthand e stands for event and for it's shortness and convenience it's mostly represented as e. (like i.e: i and j for loops or index, c for counters, n for.. etc)

Some methods in JavaScript (like addEventListener in your case) expose arguments/properties. the second argument is used as callback function which can expose optionally the Event Object property as first parameter function(event). The name event is up to you (as long as it's a valid variable name). Whatever you use will represent the returned Event Object.