Cross-Browser Event Handler

Events are certain actions performed either by the user or by the browser itself such as mouse clicks, page load etc. A function that is called in response to an event is called an event handler (or an event listener).

DOM Level 2 Events defines two methods to deal with the assignment and removal of event handlers: addEventListener() and removeEventListener(). These methods exist on all DOM nodes and accept three arguments: the event name to handle, the event handler function, and a Boolean value indicating whether to call the event handler during the capture phase (true) or during the bubble phase (false).

IE implements methods similar to the DOM called attachEvent() and detachEvent(). These methods accept the same two arguments: the event handler name and the event handler function. Since IE only supports event bubbling, event handlers added using attachEvent() are attached on the bubbling phase.

To implement event handing in a cross-browser way we need to implement a separate library to implement both types of event handlers appropriately. Here is the JavaScript code to implement a cross-browser event handler:

<script type="text/javascript">
var EventUtil = {
      addHandler: function(element, type, handler){
            if (element.addEventListener){
                  element.addEventListener(type, handler, false);
            } else if (element.attachEvent){
                  element.attachEvent("on" + type, handler);
            } else {
                  element["on" + type] = handler;
            }
      },
     
      removeHandler: function(element, type, handler){
            if (element.removeEventListener){
                  element.removeEventListener(type, handler, false);
            } else if (element.detachEvent){
                  element.detachEvent("on" + type, handler);
            } else {
                  element["on" + type] = null;
            }
      },
     
      getEvent: function(event){
            return event ? event : window.event;
      },
     
      getTarget: function(event){
            return event.target || event.srcElement;
      },
     
      preventDefault: function(event){
            if (event.preventDefault){
                  event.preventDefault();
            } else {
            event.returnValue = false;
            }
      },
     
      stopPropagation: function(event){
            if (event.stopPropagation){
                  event.stopPropagation();
            } else {
                  event.cancelBubble = true;
            }
      }
};
</script>

Examples:

To add events to HTML elements you can use this as follows:
var btn = document.getElementById(“myButton”);
var handler = function(){ alert(“Clicked”); };
EventUtil.addHandler(btn, “click”, handler);
This will display an alert every time myButton is clicked.

getEvent() returns a reference to the event object:
btn.onclick = function(event){
event = EventUtil.getEvent(event);
};

getTarget() which returns the target of the event:
btn.onclick = function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
};

preventDefault() stops the default behavior of an event:
var link = document.getElementById(“myLink”);
link.onclick = function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
};

Technorati Tags: JavaScript