How to fire an event on clicking a JavaScript text link

This article explains how to use JavaScript to fire an event when a text link is clicked.

How can I use JavaScript to fire an event when a text link is clicked?

You can use DOM manipulation methods such as document.getElementById to link to element events.

Processing required for text link event firing

Below is a detailed explanation of the processing required to fire an event when a text link is clicked.

Get text link element

To fire a text link event in JavaScript, you must first store the HTML text link element in a JavaScript variable.

To retrieve text link elements, DOM manipulation methods such as document.getElementById() and document.querySelector() can be used.

<a href="#" id="myLink">Click here</a>

const myLink = document.getElementById('myLink');

Define a function to run when clicked

We need to define a function that will be executed when the text link is clicked. This function is usually called an event handler and can be written like this:

function handleClick(event) {
  // Describe here the process to be executed when clicked.
}

The function is passed an argument named event. This argument can be used to retrieve information about the click event. For example, event.target can be used to access the clicked element itself.

Set up an event

Finally, we need to set a click event on the text link. To set the event, use the addEventListener() method.

myLink.addEventListener('click', handleClick);

The first argument specifies the type of event to be set. In the case of a click on a text link, specify the CLICK event. The second argument specifies the function to be executed when the link is clicked. Here, the handleClick() function defined earlier is specified.

Note that when a text link is clicked, the transition to the link destination is made by default, so the transition to the link destination must be canceled by calling event.preventDefault() in the event handler.

Explanation using a sample program

You can use the code below to achieve how to fire an event on clicking a text link.

<!-- HTML text links -->
<a href="#" id="myLink">Click here</a>

<!-- JavaScript code -->
<script>
  // Retrieve the elements of a text link
  const myLink = document.getElementById("myLink");

  // Define a function to execute when clicked
  function handleClick(event) {
    event.preventDefault(); // Cancel link transitions
    alert("The text link has been clicked!");
  }

  // Set up an event
  myLink.addEventListener("click", handleClick);
</script>

In this code, the HTML text link element is first obtained with the document.getElementById() method. Next, it defines a function called handleClick() to display an alert box when this function is executed.

However, to cancel the action of navigating to the link, use event.preventDefault() to disable the default event behavior. Finally, use the addEventListener() method to add a click event to the text link element. This will cause the handleClick() function to execute when the text link is clicked.

summary

We explained how to use JavaScript to fire an event when a text link is clicked.

Even on my own web page, I was able to use this method to fire a custom event when a text link was clicked.

Clicking on a text link to fire an event is one of the very basic techniques in JavaScript-based web development. We hope that the methods described in this article will serve as a foundation for more advanced JavaScript development.