Javascript - href vs onclick for callback function on Hyperlink

The Duel of href vs onclick

In the world of hyperlinks, href and onclick serve different, yet sometimes overlapping purposes. While href robustly leads you to a new page or anchor, onclick allows you to trigger JavaScript magic without being teleported away. It does something right where you stand, like a wizard! Remember to always provide a proper href attribute for good SEO karma and for users who aren't blessed with JavaScript.

Catering to all possible life-forms

Making your website accessible to all possible life-forms, including bots, is very important. The href attribute makes your hyperlinks focusable and navigable, like star-maps for keyboard jets. Bonus tip: Throw in a title and aria-role attribute, as they act like translators to users using assistive technologies.

Preparing for apocalyptic conditions

In the case of JavaScript-pocalyptic conditions (JavaScript disabled in browsers), users should have an alternative route to access equivalent content. Your hyperlinks with href can carry them to safety. In cases where teleportation is not intended, use nohref to clarify it to the galaxy explorers out there.

Leaving footprints for follow-ups

Ensure to separate your Jedi magic (JavaScript) from your travel guide (HTML). Instead of dumping spells@js inline, bind the event handlers externally using the addEventListener method. This makes your code cleaner, easier to manage, and your Jedi powers more extendable.

Harnessing the power of JavaScript

Blocking undesired spacetime warps

If you need to block any unwanted spacetime warps after handling an event, use e.preventDefault(). This stops the default action of <a> elements, but let your elements keep other browser default superpowers, like keyboard accessibility.

Adding special effects

When you are unfolding your onclick magic, you might want to refer to the element that was the source of all the action. Use this to reference it, allowing your function to tap into the element's properties for a fireworks display of dynamic responses.

Avoid oil spills in outer space

Steer clear of the javascript: pseudo-protocol in href. Besides being outdated, it can also open up wormholes for code gremlins to attack your system. Use href="javascript:void(0);" instead to prevent navigation, but remember the universal law of code - keep it readable and accessible.

Building a galaxy for everyone

While styling your galactical elements like URLs, understand that your visitors come from diverse planets and have different expectations. Like a button without a click action is as annoying as a lightsaber without batteries. Use CSS to make your URLs look better. Also, using cursor: pointer; hints users about clickable elements in your galactic guide.