Default Behaviors

Some elements trigger actions by default. For example:

1. When you click on a link, browsers will navigate to the address indicated with href.
2. When you click on a checkbox, browsers check or uncheck the checkbox.
3. When you click on a submit button on a form, browsers trigger the submit event and redirect you to the page indicated by the action attribute.

Preventing default actions

Sometimes, you want to prevent these default behaviors. You’ll see why and when you’d do so as we build components. For now, learn how to prevent it.

To prevent default behaviors, you can use the preventDefault method.

Element.addEventListener('click', evt => evt.preventDefault())

When the default action is prevented, browsers automatically set the defaultPrevented property to true.

Element.addEventListener('click', evt => {
  evt.preventDefault()
  console.log(evt.defaultPrevented) // true
})

Exercise

Prevent the default behavior of the following elements:

1. A link with a href that points to google.com
2. A checkbox

Watch what happens when you trigger the event after doing so. (Hint: nothing should happen).