Ongoing Process

I have wrestled at length with a good DOM-based way to dynamically add JavaScript events to a page.  After much Googling, I pieced the following together from a number of different suggestions (credit to whoever you are). I eventually gave up on DOM because IE’s implementation is so broken, but this part works well.

It uses eval() to execute the action, so it’s not the most elegant thing, but it’s functional.

Example and source:

<a id="event_element" href="#">Click Me</a>

<script type="text/javascript" language="JavaScript">

EventElement = document.getElementById("event_element");

AddEvent(EventElement, "onclick", "DoSomething()");

// Find browser-friendly method to add event
function AddEvent(Element, Event, Action)
	{
	//Store event for retrieval in the event handler
	Element.event = Action;
	// Most browsers
	try
		{
		Element.addEventListener(Event.substring(2), EventHandler, false);
		}
	// Internet Explorer
	catch (ex)
		{
		Element.attachEvent(Event, EventHandler);
		}
	}

// Generic handler for all events
function EventHandler(EventObject)
	{
	// Find the data location
	// Most browsers
	if (EventObject["target"])
		{
		DataLocation = "target";
		}
		// Internet Explorer
		else
		{
		DataLocation = "srcElement";
		}
	// Execute event code
	eval(EventObject[DataLocation]["event"]);
	}

</script>

This entry was posted on Thursday, January 17th, 2008 at 2:26 pm and is filed under Geek. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.