What is the difference between the different methods of putting JavaScript code in an ``?

javascript

event-listeners

fallback-mechanisms

progressive-enhancement

byNikita Barsukov·Dec 9, 2024

Deploying JavaScript in HTML using inline event handlers (onclick="...") offers convenience but may compromise code maintainability. For instance:

<a href="#" onclick="console.log('All hail to Clickzilla!'); return false;">Click</a>

Unobtrusive JavaScript, conservatively attaches event listeners externally, emphasizing structured coding and improved maintenance. It's an ideal method for clean, robust code:

<a href="#" id="clickable">Click</a>
<script>
// "Domo arigato!" to unobtrusive JavaScript
document.getElementById('clickable').addEventListener('click', (e) => {
  console.log('You dare to click me!');
  e.preventDefault();
});
</script>

Discourage href="javascript:..." due to concerns surrounding security and usability. The gold standard for modern web development? It's unobtrusive JavaScript.

Ensuring functionality with fallback mechanisms

In the spirit of progressive enhancement, it's paramount to accommodate users with JavaScript either disabled or not supported. Conventional usage of an anchor <a> includes an href with a URL, while JavaScript-powered links should come with a fallback for SEO and accessibility purposes.

<a href="fallback.html" onclick="doSomething(); return false;">Knock before you click!</a>

The fallback URL (in this case, "fallback.html") serves as a trusty backup, ensuring the link stays functional even in the face of a JavaScript blunder. In comparison, approaches like href="javascript:;" or href="#" may lead to unpredictable behavior across browsers that concern the user experience.

Ditching "javascript:;" and "#"

Employing empty JavaScript URIs ("javascript:;") may provoke unintended browser behavior such as disturbing history tracking or top page jumps. Moreover, they fail to provide context or fallback for non-JavaScript usage, leaving accessibility in the lurch.

While href="#" signals an anchor link, without corresponding JavaScript to block the default behavior, you're posing a risk for unexpected page jumps that could degrade the user experience.

Advantages of event listeners for cleaner coding

The adoption of event listeners through an external script allows for neater code and easy updates and management. It keeps your HTML markup free of hefty JavaScript code, enriching it with enough readability for both developers and machine parsing.

// As Shakespeare would say: "To click, or not to click"
document.querySelector('a#clickable').addEventListener('click', function(e) {
  console.log('Clicked more than Clippy from Microsoft!');
  e.preventDefault();
  // More complex actions can be performed here.
});

And, if you're having a party with multiple links having similar behavior, consider an invite to event delegation for an even leaner codebase.

Cross-browser consistency is the key

When contemplating cross-browser compatibility, it's important to ensure your JavaScript works like a charm across major browsers. Browser quirks may emerge with JavaScript within href or relying on weird, non-standard behavior.

Best practice, therefore, is to strip JavaScript from the href attribute and instead, use trusty event handlers.

Understanding method 4: Using "#"

If you're considering href="#", remember to pair it with JavaScript that stops the anchor's default action:

<a href="#" id="noJumpLink">No jumping here!</a>
<script>
// "I must not fear. Fear is the click-killer."
document.getElementById('noJumpLink').addEventListener('click', function(e) {
  e.preventDefault();
  // Your JavaScript function goes here
});
</script>

This approach maintains the URL's purity and avoids bouncy scroll to the top of the page leading to a seamless user experience.

Consider specific use cases

Ensure to mull over the context of using JavaScript within an <a> element. What's the link's purpose? Is it for navigation, or does it trigger an interactive aspect? Tailor your method to address the particular needs of your case. Doing so paves the way for a robust and user-oriented website.