Doubt about events in a Javascript function

Question

I’ll try to summarize

I was having a problem with an onclick on a button, and can solve using e.preventDefault();

However the doubt arose, to work I had to add "and" my function and was function myFunction(e) And in my html code I had to put onclick that way

onclick="addList(event)"

I tried to search on Event and maybe I did not look the right way but I did not find, I believed that the values in function were optional, but in this case I had a surprise, because it only works exactly that way, using (Event) in onclick and (and) in function.

Can someone give me a light on that part? I was confused

Answer 1

Your Javascript application is reactive to HTML events. That is, when the user clicks a button, you can add a Handler to define some behavior when this button is clicked, for example, make an HTTP request.

To add a Handler event is simple, use the addEventListener:

document.querySelector('#meu-botao').addEventListener('click', function() {
  console.log('O botão foi clicado');
});

<button id="meu-botao">Clique-me</button>

Events may have previous behaviors to the ones you define. For example:

• When you click on one <a href="...">, the browser redirects you to a page
• When you click on the button Submit of a single element <form>, an HTTP request will be made
• When you press the arrow key, the browser will make a scroll

All these behaviors are called standard behaviors and are defined by the browser.

But what if you want to create a game to run in the browser and need to use the arrows to have another behavior? Therein comes the Event.preventDefault().

Cancel the event if cancellable, without stopping the spread of the event.

In the quote, it is if cancellable because some browsers do not allow you to override a default behavior. For example: no browser will let you overwrite ALT+F4.

See an example of a checkbox with its superscript behavior:

let prevent = document.querySelector("#prevent");
let noPrevent = document.querySelector("#no-prevent");

prevent.addEventListener("click", event => {
  console.log('clicou!');
  event.preventDefault();
});

noPrevent.addEventListener("click", event => {
  console.log('clicou!');
});

<input type="checkbox" id="prevent">com preventDefault
<br />
<input type="checkbox" id="no-prevent">sem preventDefault

The e that you mentioned, is the event in the functions I mentioned. Every propagated event has an instance of Event trailer. It is possible to have important information about the event, and functions such as the preventDefault.