5

I am not able to understand the parameter 'e' which is passed to prevent the Default Action in JavaScript:

document.getElementById('submit').addEventListener('click', calculate, false);
function calculate(e){
  e.preventDefault():
}
4
  • 3
    e is the event. Sep 14, 2017 at 9:58
  • 3
    e represents the event which has a lot of properties. Sep 14, 2017 at 9:58
  • 2
    You can read about the click event here Sep 14, 2017 at 10:02
  • 3
    When the JavaScript engine calls the callback you provided, it passes an Event object. You gain access to that passed object by giving the function a parameter. You don't have to call it e; you can use any valid variable name you want. Your confusion probably arises from the fact that you provide a function called by JS, instead of the other way around.
    – user5734311
    Sep 14, 2017 at 10:03

3 Answers 3

3

The e in e.preventDefault prevents the default action when a link is clicked, which is the page refreshing or changing. So it allows for behavior such as clicking on a link making a call to the database without a page refresh.

Here is a guide on the topic: jQuery event.preventDefault() Method

1
  • 1
    No; calling the preventDefault method prevents the default action. The e itself is the event object. (Also, w3schools has a quite poor reputation as a reference.) Feb 10, 2023 at 17:40
1

The Event type is passed into the second argument of addEventListener. This is referenced as e in the closure you've defined, and on which you've called .preventDefault.

MDN (in the links above) provides excellent documentation of the above type, the functions that you can call on it and the impacts those functions have.

1
  • No, the argument passed to addEventListener is the callback - not the event, and not the Event type. The callback here is implemented as an ordinary function, not as a closure. The event is passed to the callback. Feb 10, 2023 at 17:39
1

Where the code says

document.getElementById('submit').addEventListener('click', calculate, false);

This means that the function named calculate will be used to handle 'click' events for the 'submit' element in the document. That is: the Javascript engine makes a note to call calculate any time that the user clicks on the element with an ID of 'submit'.

When that function is called, it will be passed an object that represents the event - specifically, it will be a mouse event, because clicking is done using the mouse.

So, where the code says

function calculate(e){
  e.preventDefault();
}

This MouseEvent object will be assigned to the parameter e used in the function's code. The name e is entirely arbitrary, just like any other function parameter. The object stores a lot of information about the event: for example, which buttons were clicked, whether modifier keys were pressed for the click, the location of the click (in multiple different coordinate systems), and whether it came from an actual mouse or from touching a touchscreen. It also provides the core Event functionality, such as a timestamp for exactly when the mouse was clicked.

For completeness:

Any time that the mouse is clicked in the browser normally, the browser itself will have its own rules for what should happen - for example, clicking on an ordinary <a> link tells the browser to go to the linked URL. This is the "default" action. The Event has a special method preventDefault: calling this method signals to the browser to prevent that default action - i.e., to not do whatever it was going to do otherwise.

This is useful so that, for example, a submit button on a form can do some validation in Javascript, and then not submit the form if there is something wrong with the form inputs.

1
  • I wrote a new answer because my attention was drawn to this question by the "Tyrannical Mods of Stack Overflow" video and the existing answers were full of technical inaccuracy. I have not used Javascript regularly in a very long time (although I am planning to get back into it) but this is pretty basic material. Feb 10, 2023 at 17:41

Not the answer you're looking for? Browse other questions tagged or ask your own question.