Event Object

To handle an event, it is not enough to know that it is a click or a key press; details may be needed. For example, the current text field value, the element on which the event occurred, built-in methods, etc.

Each event is an object that contains information about the event details, and it is automatically passed as the first argument to the event handler. All events belong to the base class called Event.

const handleClick = event => {
  console.log(event);
};

button.addEventListener("click", handleClick);

The event parameter is the event object, which is automatically passed as the first argument during callback call. You can call it whatever you like, but usually it is declared as e, evt or event.

Here are some properties of event objects:

• event.type is event type.
• event.currentTarget is the element on which the event handler is executed.

Browser default actions

Some events trigger the browser's default action in response to a specific type of event. For example, clicking on a link initiates visiting a new address specified in href, and submitting the form reloads the page. Most of the time, this behavior is undesirable and needs to be canceled.

To cancel the default browser action on the event object, there is a standard preventDefault() method.