(e) implementation in coding

JavaScript
1

Hello coders,

As far as I know, (e) calls event handlers, but I’m unsure about the terminology. What types of event handlers should be mentioned earlier to use this attribute?

Thanks in advance and happy coding!

taskForm.addEventListener("submit", **(e)** => {
  e.preventDefault();
2

e is the parameter of the callback function, it doesn’t call event handlers
it’s short for event, also it’s a convention, it could be actually called anything

the function when called is passed the event object as argument

3

Thank you. What is the difference between (e) and ()? If I forget to use it, how will output be affected?

4

if you don’t use a parameter name, there will not be a variable to hold the value passed in, and it will be accessible only through the arguments object

5

I understood roughly, but still it isn’t concrete. Would you mind asking about the difference in each situation with example codes?

Thanks in advance!

6

You should test this out yourself, it’s a good learning experience.

But basically, if you don’t pass the e variable argument, then you cannot use it. But I’m just repeating @ILM comment. Testing it yourself through code is a better way to learn about this.

There’s also many explanations and examples already:

https://stackoverflow.com/questions/35936365/what-exactly-is-the-parameter-e-event-and-why-pass-it-to-javascript-functions

https://forum.freecodecamp.org/t/using-e-in-functions/467127/8?u=pkdvalis

https://itsourcecode.com/javascript-tutorial/what-is-javascript-e-how-to-use-it/

https://medium.com/@wyou130/behind-the-scenes-javascript-event-listeners-and-e-71f0eb49be92

7

if you ahve difficulties here you may want to review functions, function parameters and arguments

8

MDN: Event objects

Technically, event is a global and can be accessed inside handlers without a parameter. But that is a bad practice to use.

document.querySelector("button").addEventListener("click", () => {
  console.log(event.target.tagName); // "BUTTON"
});
1 Like