How can I programmatically invoke an onclick() event from a anchor tag while keeping the ‘this’ reference in the onclick function?

Question

Is it possible to programmatically invoke a onClick-event for an anchor tag, while maintaining the 'this' reference to the anchor?

The following doesn't work... (at least not in Firefox: document.getElementById('linkid').click() is not a function)

<script type="text/javascript">
    function doOnClick() {
        document.getElementById('linkid').click();
        //Should alert('/testlocation');
    }
</script>
<a id="linkid" href="/testlocation" onclick="alert(this.href);">Testlink</a>

Answer 1

To trigger an event you basically just call the event handler for that element. Slight change from your code.

evnt = document.getElementById("element")["onclick"];

if (typeof(evnt) == "function") {
    document.getElementById("element")["onclick"]();
}

Answer 2

If you're using this purely to reference the function in the onclick attribute, this seems like a very bad idea. Inline events are a bad idea in general.

I would suggest the following:

function addEvent(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
     elm.addEventListener(evType, fn, useCapture);
     return true;
    }
    else if (elm.attachEvent) {
     var r = elm.attachEvent('on' + evType, fn);
     return r;
    }
    else {
     elm['on' + evType] = fn;
    }
}

handler = function(){
   showHref(el);
}

showHref = function(el) {
   alert(el.href);
}

var el = document.getElementById('linkid');

addEvent(el, 'click', handler);

If you want to call the same function from other javascript code, simulating a click to call the function is not the best way. Consider:

function doOnClick() {
   showHref(document.getElementById('linkid'));
}

Answer 3

You need to apply the event handler in the context of that element:

var elem = document.getElementById("linkid");
if (typeof elem.onclick == "function") {
    elem.onclick.apply(elem);
}

Otherwise this would reference the context the above code is executed in.

Answer 4

Here is an example to set all child anchor tags onclick event using javascript.

http://urenjoy.blogspot.com/2009/07/set-divs-all-anchor-tags-onclick-event.html

Hope, It helps.