Question

Background:
I’m currently writing a greasemonkey script that embeds/modifies a specific page’s html. The page is setup with 3 nested divs. Of those 3 divs, I can only add an event listener to the outer most div(This is due to other events and the such already added to the elements). With the inner most div, links are added via AJAX/COMET. As with the inner divs, I can not add event handlers to these links due to the page’s current event handlings.

What I need: When a link in the inner most div is clicked, the event will bubble up to the outer most div. From the outer most div, is there a way 1: to tell if it was a link clicked in the inner most div, and if so, 2: how to get that link’s href

Please no jQuery solutions. It seems a bit over doing it sense this is the only javascript that will be embedded into the page

Answer 1

I would just use a simple cross-browser event listener and the event.target (or event.srcElement in IE), like so:

var addEvent = function (el, ev, fn) {
    if (el.addEventListener) {
        el.addEventListener(ev, fn, false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + ev, fn);
    } else {
        el['on' + ev] = fn;
    }
};

var outer = document.getElementById('outer');

addEvent(outer, 'click', function(ev){
    ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    alert(target.href);
});

See demo