JavaScript DOM Scripting By Example Adding and Removing Names Using the submit Event

salahuddin Sediqi
salahuddin Sediqi
3,315 Points

Hello Everyone, I really didn't understand, why should we write (e) paramater inside function?

Can anyone tell me, why we have written "e" inside function. What does it do.

app.js
const form = document.querySelector('form');
const submitButton = form.querySelector('[type=Submit]');

form.addEventListener('submit', (e) => {
  e.preventDefault();
});
index.html
<!DOCTYPE html>
<html>
<head>
  <title>Submit Event</title>
</head>
<body>
<form>
  <label>Name:</label>
  <input type="text" name="name">
  <input type="Submit" name="submit" value="Submit">
</form>
  <script src="app.js"></script>
</body>
</html>
chris robinson
chris robinson
2,818 Points

How I remember Events because I been learning event listeners and events is by....

By adding the e or event in eventListeners it gives you more control over what you are trying to accomplish with that listener. For example in the code you provided the e.preventDefault will run because its in the event object and it will stop the default from happening. Without the e then nothing would happen in this case

Hopefully I was clear with this

2 Answers

Steven Parker
Steven Parker
173,812 Points

The parameter receives the event object that carries data and methods related to the event. It's needed for things like identifying the event target, or for calling "preventDefault" as this code is doing.

In rare cases, the event object is not used by the handler code and the parameter can be omitted. But it never hurts to include it, and future changes to the handler might use it after all.

salahuddin Sediqi
salahuddin Sediqi
3,315 Points

OK

Thank you so much for your responses