How to make your web site work in all browsers

When we develop a web page with features which may not work in all browsers we need to ensure that the web page works with all browsers by programming the DOM elements. We do this by adding an event handler to an event exposed by a DOM element using $addhandler.

For those of you who are not familiar, a DOM element is a element of a DOM tree. A DOM tree is a hierarchical representation of all HTML elements which we place in the web page. An event handler helps to associate a function with an event. For example,

Object             Event Handler

Button              onclick
Text                onchange,  Onfocus

Note that this definition of event handler pertains to JavaScript.

Firstly, let us see how to attach code to Dom events using Javascript. If you use Javascript earlier, we will acquitted with the event model. We can program each DOM element of the DOM tree of a web page by associating events and code in event handlers as we will see below.

Let us take the example of a button. A HTML button element can raise a click event when it's clicked by the user. We will associate the function validcheck(), to the event handler onclick of the button object. The following code does this.

<input type=”button” name=cmdsubmit” onclick=” validcheck()>

A number of different types of event handlers can be triggered by different events.Common events that can trigger JavaScripts are mouse actions ,keyboard actions , actions on form fields.

This method of attaching code to DOM events will not work in all browsers. This is because, different browsers implement the DOM programming differently. So, your web page working on one browser may not work on other browsers.

The Microsoft Ajax Library provides to the problem by including an abstract API which abstracts the operations made on Dom elements. This API eliminates the need to know which functions are supported by the DOM implementation of a particular browser whether it is a Internet explorer, Firefox, Safari or Opera.

The abstraction API consists of two classes: Sys.UI.DomElement and Sys.UI.DomEvent.

Sys.UI.DomEvent Class 

The Sys.UI.DomEvent Class is included in the Microsift Ajax library to provide cross browser compatibility to DOM events.  This class contains in the Namespace: Sys.UI. We use the DomEvent class to add, remove, modify, and handle client events.

Sys.UI.DomEvent addHandler Method 

This method is a class of the Sys.UI.DomEvent and  enables us to add a DOM event handler to the DOM element.

Sys.UI.DomEvent.addHandler(element, eventName, handler);

Term              Definition

element          The element that exposes the event.
eventName     The name of the event.
handler           The client function that is called when the event occurs.

The class  Sys.UI.DomEvent addHandler can also be written as $addHandler.

Use the addHandler method to add a DOM event handler to the element that exposes the event. The eventName parameter should not include the "on" prefix. For example, specify "click" instead of "onclick". This method can be accessed through the $addHandler shortcut method.

$addHandler(element, eventName, handler);

The below example demonstrates how a blur event occurs when a text field on a form loses focus. This example also demonstrates the $addhandler will result in cross browser compatibility.

<form id="form1" runat="server">
<asp:ScriptManager ID="TheScriptManager" runat="server"></asp:ScriptManager>
<script type="text/javascript">
function pageLoad() {
            var txtName = $get('txtName');                

            $addHandler(txtName,                              
               'blur', txtName_focus);                
        }

        function pageUnload() {
            $removeHandler($get('txtName'),                     
                'blur', txtName_focus);                
        }                                                         

        function txtName_focus(evt) { 
                      var count = $get("txtName").value.length;
                       $get("count&quo