Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by salahuddin Sediqi
salahuddin Sediqi
3,410 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
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
231,275 Points
Steven Parker
Steven Parker
231,275 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,410 Points
salahuddin Sediqi
salahuddin Sediqi
3,410 Points

OK

Thank you so much for your responses