Default actions

The click handler was triggered, the message was displayed, but at the same time the link led to another page.

The button has been coded as a link (using the <a> tag) and not as a button (using the <button> tag) in case the scripts are not able to execute for the user. This is not something that is common, but our web designer want to take account of such a scenario. We cannot change the layout. Our assignment is just to program the logic. This is something that you will commonly encounter in practice: web designers ofter receive a prepared layout, and they are instructed to solve certain problems without changing the layout.

So what should you do?

Certain page elements have default actions. They are also called default actions. For example, when you click on the submit button of a form, the data entered in this form will be sent to the server, and when you click on a link, the browser will take you to that link. This is exactly what is happening in our case!

Default actions can be canceled, if necessary, and this is what we will do. The event object will help us do this.

The event object is a parameter of the handler function. It is always passed by the browser to this function at the time the event occurs. This object contains many useful properties and methods, including in particular a method that cancels the action by default: preventDefault().

In order to use the properties and methods of the event object, all that we need to do is specify this object using the parameter of the handler function and write instructions. JavaScript will do the rest. Among some developers, it is customary to refer to the parameter using its abbreviation: evt. This allows us to avoid certain mistakes that we will cover in more detail in future courses. We will also call the handler parameter evt. The event object will be passed to the function as soon as this event happens.

link.addEventListener('click', function(evt) {
  // We cancel the action by default.
  evt.preventDefault();

  // We add instructions for the click event.
  console.log('A click occurred');
});

In the example, we canceled the action by default, and when you click on the link, you will not be taken to the destination. Instead, when you click, the following message appears in the console: A click has occurred.

We will cancel the default action for the "Show contacts" link in our project. Make sure that the browser does not take you to the target link. At the same time, make sure not to break the behavior that the web designer implemented: If the user has scripts enabled, a pop-up will appear on the page, and if scripts are disabled, the user will be taken to a page that has been prepared in advance for this case when clicking on the link.