JavaScript DOM Scripting By Example Adding and Removing Names Registering Names

Siddharth Pandey
Siddharth Pandey
4,184 Points

How is the parameter of a function an event object?

In this video Guil said we can prevent the default behaviour by using event.preventDefault(); he called this method on the parameter of the function(which is in my case 'name'), shouldn't we actually be calling it on input, because the name is the data being inputted?

Here is my code(I used the function parameter because it doesn't work when using input, but why is this?)

const form = document.querySelector('#registrar');
const input = form.querySelector('input');

form.addEventListener('submit', function submit(name) {
  name.preventDefault();
  const ul = document.querySelector('#invitedList');
  let li = document.createElement('li');
  li.textContent = input.value;
  ul.appendChild(li);
});

1 Answer

Steven Parker
Steven Parker
177,710 Points

The argument passed by the system to a listener's callback is always an event object.

Element's don't have a "preventDefault" method, so that's why it doesn't work when attached to "input". But that's a method that an event object has, so you can call it on the handler's parameter.