Html anchor link - href and onclick both?

Interactive navigation with JavaScript

Event handlers are your friends offering a better optimized approach compared to inline JavaScript. They can attach to an `onclick`` event on your link:

document.getElementById('link').addEventListener('click', function(event) {
    doSomething(); // Do your magic
    event.preventDefault(); // Hold your horses, browser!
    window.location.href = this.getAttribute('href'); // All aboard the navigation train!
});


Overriding defaults for turbo control

Pause the default action using event.preventDefault(). It allows your JavaScript to take the wheel, useful when dealing with the dark arts of async operations or dynamic navigation decisions.

Navigating on the wind of JavaScript

Sometimes you want to sail to a URL decided during your onclick event, window.location.href is your compass:

function navigateToUrl(url) {
    window.location.href = url;
}

// Later in your code
navigateToUrl('https://example.com'); // Unleash the homing pigeon!


Promoting JavaScript to a new home

Think outside the box. (Or should I say, outside the tag?) Consider external scripts to improve code clarity and separate church from state:

<a href="https://example.com" id="link">Go to Example</a>


// In your external JS file
document.getElementById('link').onclick = function() {
    doSomething(); // Keep calm and do something
    return true; // Fly, you fool!
}


A journey with jQuery

For those of you on the jQuery bandwagon, binding click events is a cinch:

$('a#link_1').click(function(e) {
    e.preventDefault(); // Stop! Hammer time
    doSomething(); // Dance like nobody's watching
    window.location.href = this.href; // Off to Neverland!
});


By using jQuery's .click(), your code can get a makeover, becoming more fabulous and low-maintenance. Just don't forget to invite jQuery to the party:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


Inline JS vs External JS: The Ultimate Smackdown

Inline JS	External JS
Quick and dirty	Clean and sustainable
Maintenance? What maintenance?	Debugging like a boss
HTML? More like HT-Mess!	An HTML Mona Lisa

Reign over dynamic links

Even dynamically-created links can sport both href and onclick:

// Creating an anchor element out of thin air
var newLink = document.createElement('a');
newLink.href = 'https://example.com'; // Here's your destination
newLink.onclick = function() {
    doSomething(); // Do something awesome
    return false; // Sorry, we're not going anywhere
};
document.body.appendChild(newLink); // Welcome to the family!


For the sake of accessibility, don't forget href even when conjuring links out of the ether.