cross browser event handler

on my most recent project i needed to create event handlers to control actions taken when certain things were clicked on. in my case it was a multi-tiered navigation menu, but this has so many amazing applications like context (right-click) menu’s etc.

catch the event
first i placed javascript in the of document to capture the onmousedown event (onclick is not as cross browser friendly) and set it to perform a function i called eHandler rather than take the usual action.

<script>
<!--
if (window.addEventListener)
document.addEventListener('click',eHandler,false);
else if (window.attachEvent)
document.attachEvent('onclick',eHandler);
-->
</script>

the eHandler function
next i wrote the eHandler function to perform various tasks depending on what was clicked. this comes in handy if you want to have different task performed depending on what is clicked.

function eHandler() {

	// get the event
	if (!e) var e = window.event;

	// cross browser method to get the element that was clicked on
	if (e.target) elem = e.target;
	else if (e.srcElement) elem = e.srcElement;

	// get the element's id
	var elem_id = elem.getAttribute("id");

	// catch right clicks, rightclick is a boolean
	if (e.which) rightclick = (e.which == 3); // old netscape way
	else if (e.button) rightclick = (e.button == 2); // modern way

what we have so far
at this point the function now knows what element was clicked on, that element’s id, and whether the user right clicked or not. from here we can add various check and carry out various task with the given information. for example, lets say if the user clicks on the element with the id “myMenuButton”. we can either: display the menu for a normal click OR display that element’s context menu for a right click.

	if (elem_id == "myMenuButton") {
		if (rightclick) {
			var c_menu = document.getElementById("cMenu")
			c_menu.style.display = "block";
		} else {
			var my_menu = document.getElementById("myMenu")
			my_menu.style.display = "block";
		}
	}

return false
finally we want the function to return a value of false to suppress whatever action the browser wants to take from the click action. this is a good way to disable the browsers built in context menu

	return false;
}

the whole function

function eHandler() {

	// get the event
	if (!e) var e = window.event;

	// cross browser method to get the element that was clicked on
	if (e.target) elem = e.target;
	else if (e.srcElement) elem = e.srcElement;

	// get the element's id
	var elem_id = elem.getAttribute("id");

	// catch right clicks, rightclick is a boolean
	if (e.which) rightclick = (e.which == 3); // old netscape way
	else if (e.button) rightclick = (e.button == 2); // modern way

	if (elem_id == "myMenuButton") {
			var c_menu = document.getElementById("cMenu")
			c_menu.style.display = "block";
		} else {
			var my_menu = document.getElementById("myMenu")
			my_menu.style.display = "block";
		}
	}
	return false;

}

summation
its easy to see just how many possibilities event handlers really have when applied properly. combine this with some crafty AJAX and you’ve gone some serous web app potential at your fingertips.