Event handling details in IE

[Dormilich]

Currently I’m writing on an Event handler for IE (including capturing, which hardly any cross browser handler does), but I can’t test my code in IE (I don’t have Windows).

My particular question is about the following:

base = e.target || e.srcElement;
if (base == this) { // would this work?
    // execute capture handlers
}

This code snippet is executed in the handler attached to the onevent properties, so this points to the appropriate element.

PS. works in FF (if I hide .addEventListener())

[RamananKalirajan]

Can I know from where you are getting or referring 'this' object. Are you adding any listener for any form element or object?

Thanks and Regards
Ramanan Kalirajan

[Dormilich]

Can I know from where you are getting or referring 'this' object.

as it is usual for event handlers, this is assigned automatically to the element that the handler is executed on.

Are you adding any listener for any form element or object?

I can add add any listener to any Element. the only constraint for the object would be that I’ll prototype the "addEvent" function as "addEventListener" into the Element interface.

give word, if you need to see the whole function

[RamananKalirajan]

Yes I need to see the function.. because in IE it is expecting the 'this' object when i tried it.

Thanks and Regards
Ramanan Kalirajan

[Dormilich]

I guess you need the addEvent() function too …

// function that executes events according to DOM
function IEHandler(e)
{
    // if no Event object is passed (IE)
    e = e || window.event;
 
    var base      = e.target || e.srcElement, // get Event Target
        evTypeRef = '__' + e.type, // get Event Type
        retValue  = true, // return values for bubbling handlers
        i, j, l, elem, chain, evPhase;
 
    // execute only once
    if (base == this) {
        // get elements for capturing
        chain = getParents(base); // a simple while() loop getting the .parentNode
        for (i = chain.length; i--;) {
            elem = chain[i];
            // if there are functions attached to execute in capturing context
            if (elem[evTypeRef] && elem[evTypeRef].capture) {
                evPhase = elem[evTypeRef].capture;
                // execute each function
                for (j = 0, l = evPhase.length; j < l; j++) {
                    if (evPhase[j]) {
                        // there can be no value returned due to the executing
                        // element of this loop is the Event target and not the
                        // element the handler executes on. 
                        callHandler(evPhase[j], elem, e); // work around .call(), if not supported
                    }
                }
            }
        }
    }
    // if there are functions attached to execute in bubbling context
    if (this[evTypeRef] && this[evTypeRef].bubble) {
        evPhase = this[evTypeRef].bubble;
        for (j = 0, l = evPhase.length; j < l; j++) {
            if (evPhase[j]) {
                // this time we're in the correct element context so we can
                // safely return something
                retValue = callHandler(evPhase[j], this, e) && retValue;
            }
        }
    }
    return retValue;
}
 
function addEvent(obj, evType, fn, useCapture) 
{
    if (!(fn instanceof Function)) {
        throw new TypeError("Function expected!");
    }
    // make useCapture a Boolean
    useCapture = !!useCapture;
 
    // W3C
    if (obj.addEventListener) {
        obj.addEventListener(evType, fn, useCapture);
    } 
    else {
        var evTypeRef = '__' + evType,
            phase     = useCapture ? "capture" : "bubble";
 
        // create ".__event" property
        if (!obj[evTypeRef]) {
            obj[evTypeRef] = {};
        }
        // search in ".__event.bubble"/".__event.capture"
        // if function is already registered
        if (obj[evTypeRef][phase]) {
            if (array_search(fn, obj[evTypeRef][phase]) > -1) { // work around .indexOf(), if not supported
                return;
            }
        }
        // create ".__event.bubble"/".__event.capture" property
        else {
            obj[evTypeRef][phase] = [];
            if (!useCapture && obj['on' + evType] && obj['on' + evType] != IEHandler) {
                // add any previous function assigned to .onevent
                obj[evTypeRef][phase][0] = obj['on' + evType];
            }
        }
        // add function to stack
        obj[evTypeRef][phase].push(fn);
        // set "global" handler
        obj['on' + evType] = IEHandler;
    }
}

[gits]

Hi Domilich,

basically the line:

if (base == this) { 

should work ... since

base = e.target || e.srcElement

retrieves the reference to the node where the event was captured and triggered the corresponding handler. currently i don't see where a problem could be? what could be unsure?

kind regards
gits

PS: you might even have an additional look here at the 'Which HTML element is the target of the event?'-section ... where they have an additional Safari-hack ... don't know whether this would be relevant today?

[Dormilich]

currently i don't see where a problem could be? what could be unsure?

my problem is that I don’t have an IE to test it. in theory it should work fine …

[gits]

... is there simple testcase that you might provide ... so that i could just call it with IE ... at home i might use an IE4linux ... but for the Safari issue that was mentioned in the above post on quirksmode.org i couldn't test it ... just dropped my last and good old power-mac a half year ago ... so i don't have a real safari to test ... just a chromium on linux which is even webKit based and should work similar ...

kind regards

[Dormilich]

I don’t need to test the code in Safari/Chrome/FF/Opera, since those support addEventListener.

test link

[gits]

it alerts 3 and then 4 ... in IE7 ...

kind regards

PS: the mentioned Safari issue doesn't concern the adding of events ... just the retrieval of the correct target ... but it was just an additional note ...

[Dormilich]

it alerts 3 and then 4 ... in IE7 ...

any idea why it skipped the capturing part?

[gits]

IE uses event-bubbling according to this - section: Event Flow - and i think that IE just supports bubbling, while more W3C compliant browsers support both, capturing and bubbling. don't know whether IE could be forced to use capturing ... there seems to be a setCapture() method ... but i didn't investigate on that ... don't really think that it would be worth to fiddle with that :)

kind regards

[Dormilich]

I know that IE only supports bubbling, that's why I added a code block (post #5, lines 13 - 32), that traverses the Nodes from window to the target Element. The only problem is, that this block must be executed only once, which would be the point just before IE starts bubbling (or calling the functions on the bubble handlers).

my assumption is that either if (base == this) doesn't work or something's wrong with the parent element chain.

[gits]

started to debug it: if (base == this) works as intended ... will have a closer look now ...

[Dormilich]

I modified the getParents() function, maybe it works now.

[gits]

the problem is the getParents() method ... could be fixed with:

function getParents(elem) {
    var p = [];
 
    while (elem.nodeType == 1) {
        p.push(elem);
        elem = elem.parentNode;
    }
 
    return p;
}

obviously elem instanceof Element doesn't work in IE ... with the above fix the alerts are as expected ...

kind regards

[Dormilich]

obviously elem instanceof Element doesn't work in IE

good to know, but somehow I’m not surprised …

[gits]

crappy IE ... as always :) ...