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.
<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").innerHTML="";
$get("count").innerHTML = count;
}
</script>
<span>Please type some text:</span>
<input type="text" id="txtName" />
<span id="count">Number of characters</span>
</form>
The above program displays the number of characters entered in the textbox when the textbox loses the focus.
