addEvent() new style

Introduction

This is the Dean's version; rewritten a bit. (these were mine: long version, short version)

Changes:

Note that I'm aware that generally prototyping the Object object is considered bad practice since Objects are being used as a hashmap. From another point of view however I feel that this may also be considered misuse of the Object object by lack of a primitive hashmap object ;)
There can be situations where prototyping the Object object is actually the best solution; I actually once made a script that prototyped a method to every primitive object for PHP-style serializing.

Outstanding issues and discussion points

These are some points and questions that have come to mind and are open for input/discussion:

I personally believe we should limit ourselves and not try to fully backport the W3C event model to older browsers; this should be a simple solution that solves the main problems involving attaching and detaching multiple events, and the scope for the handlers.
I think we should also explicitly point that out to possible users.

The JavaScript code

// written by Dean Edwards, 2005
// with input from Tino Zijdel - crisp@xs4all.nl
// http://dean.edwards.name/weblog/2005/10/add-event/
function addEvent(element, type, handler)
{
	if (element.addEventListener)
		element.addEventListener(type, handler, false);
	else
	{
		if (!handler.$$guid) handler.$$guid = addEvent.guid++;
		if (!element.events) element.events = {};
		var handlers = element.events[type];
		if (!handlers)
		{
			handlers = element.events[type] = {};
			if (element['on' + type]) handlers[0] = element['on' + type];
			element['on' + type] = handleEvent;
		}
	
		handlers[handler.$$guid] = handler;
	}
}
addEvent.guid = 1;

function removeEvent(element, type, handler)
{
	if (element.removeEventListener)
		element.removeEventListener(type, handler, false);
	else if (element.events && element.events[type] && handler.$$guid)
		delete element.events[type][handler.$$guid];
}

function handleEvent(event)
{
	event = event || fixEvent(window.event);
	var returnValue = true;
	var handlers = this.events[event.type];

	for (var i in handlers)
	{
		if (!Object.prototype[i])
		{
			this.$$handler = handlers[i];
			if (this.$$handler(event) === false) returnValue = false;
		}
	}

	if (this.$$handler) this.$$handler = null;

	return returnValue;
}

function fixEvent(event)
{
	event.preventDefault = fixEvent.preventDefault;
	event.stopPropagation = fixEvent.stopPropagation;
	return event;
}
fixEvent.preventDefault = function()
{
	this.returnValue = false;
}
fixEvent.stopPropagation = function()
{
	this.cancelBubble = true;
}

// This little snippet fixes the problem that the onload attribute on the body-element will overwrite
// previous attached events on the window object for the onload event
if (!window.addEventListener)
{
	document.onreadystatechange = function()
	{
		if (window.onload && window.onload != handleEvent)
		{
			addEvent(window, 'load', window.onload);
			window.onload = handleEvent;
		}
	}
}

Example

This is the original markup and menuhandling javascript of the contest page written bij PPK; I only changed the CSS to make it a more pretty example that behaves and looks pretty much the same in most browsers. This menu doesn't work perfectly and is only intended to demonstrate that the addEvent and removeEvent functions are working properly (here is an example of a better working menu, although this only uses the DOM level 0 event model).

Remove border/background effect.

Contact

If you have any questions regarding this page, please feel free to sent me an email.

October 21, 2005 - Tino Zijdel ( crisp@xs4all.nl )