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 ([B]base == this[/B]) { // 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 .addEventListen er())

[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 "addEventListen er" 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 addEventListene r.

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.