Sometimes, we want to access event to call preventdefault from custom function originating from onclick with JavaScript.

In this article, we’ll look at how to access event to call preventdefault from custom function originating from onclick with JavaScript.

How to access event to call preventdefault from custom function originating from onclick with JavaScript?

To access event to call preventdefault from custom function originating from onclick with JavaScript, we get the event object from the event handler function’s parameter.

For instance, we write

<a href="#">Click to say Hi</a>

to add a link.

Then we show an alert when we click on the link by writing

const a = document.querySelector("a");
a.onclick = (e) => {
  e.preventDefault();
  alert("hi");
};

We select the link with querySelector.

Then we set its onclick property to a function that calls e.preventDefault to stop the default behavior of navigation to the URL set as the href attribute’s value.

Instead, we call alert with 'hi' to show an alert box.

Conclusion

To access event to call preventdefault from custom function originating from onclick with JavaScript, we get the event object from the event handler function’s parameter.