Question

I’m curious whats the best way to call a JS function with a href link in HTML. I don’t use a library and i see alot of mention about jquery using event handlers …

But if im not using a library can it still be done or will i have to use an on click type call ?

Answer 1

You can use event handlers with plain javascript. No framework is required. Here’s a cross browser function I use:

// add event cross browser
function addEvent(elem, event, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(event, fn, false);
    } else {
        elem.attachEvent("on" + event, function() {
            // set the this pointer same as addEventListener when fn is called
            return(fn.call(elem, window.event));   
        });
    }
}

And, an example of using it would be like this:

HTML:

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

Javascript:

var link = document.getElementById("myLink").
addEvent(link, "click", function(e) {
    // process the click on the link here
});

If you don’t want the default click of a link to happen, then you need to prevent the default behavior from the event handler like this:

var link = document.getElementById("myLink").
addEvent(link, "click", function(e) {
    // process the click on the link here

    // prevent default action of the click
    if (e.preventDefault) {
        e.preventDefault();      // normal browsers
    } else {
        e.returnValue = false;   // older versions of IE (yuck)
    }
});