What I have provided is a cross browser approach to attach and manage events. IE uses Object.attachEvent to attach an event to an object, whereas Fx uses Object.addEventListener to do the above function. Similarly the functions used for removing an attached event also varies. What I have provided is a crossbrowser function addEvent which will call the function specific for that browser. Similarly calling the function preventDefault from an attached event handle prevents the triggering of the default action associated with that event.
My example uses the addEvent function to attach the function init to the onload event of the document. Which in turn attaches the function clickTest to the onclick event of the div ElemId. Now when you click on the div, the function clickTest is called which alerts that the element has been clicked on. Once the element is clicked upon, the function clickTest attached with the div is removed so that clicking on the div again will not show the alertbox.
In simple words,
1. init function attached with document load
2. init function attaches clickTest to onClick event of div so that a alert box shows when it is clicked.
3. clickTest detaches itself from the onClick event of div So clicking on the div will show an alertbox the first time.
addEvent - Use this function to add a cross browser event listener to an element
removeEvent - Use this function to remove an added event listener
preventDefault - Use this function to prevent the default action associated with an event
stopPropagation - Use this function to prevent the bubbling of the event.
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<title>Cross Browser Event Management</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
<!--
/*
Cross Browser Event Management
*/
