ASP.NET AJAX Client Events - Interacting with Client Objects

ASP.NET AJAX makes working with client objects and client events much easier. The code below allows you to choose the type of event and the "test" object to act upon. I pulled a sub-set of client events from the site (included below). Also, the code I'm working with began as an AJAX sample I created for the site. Although now, this code is much more dynamic. 

I included a number of events that you can select from the UI:


I think the most interesting aspect of the client events involve the charCode verses the keyCode. The keyCode field is raised by the keyUp or keyDown event. The charCode field is raised by the keyPress event. The keyUp and keyDown events are raised for every key, which includes modifier keys such as ALT, CTRL, and SHIFT. The keyPress event is not raised for these single modifier keys. Try out the code below. You can select the type of event and the object to interact with. Once you have made your selection, interact with the "Test" object to see the event details.

Client Object Window

Here's the code:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">

<script runat="server">


<html xmlns="">

<head id="Head1" runat="server">


    <style type="text/css">

    #UpdatePanel1 {

      width:300px; height:100px;





    <form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server"/>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional">



                   <asp:Panel ID="Panel2" runat="server" GroupingText="Select Event & Object">




                   <asp:Label ID="Label3" runat="server" Text="Event Type: "></asp:Label>



                   <asp:DropDownList ID="DropDownList3" runat="server">




















                   <asp:Label ID="Label5" runat="server" Text="Test Object: "></asp:Label>



                   <asp:DropDownList ID="DropDownList2" runat="server">













                    <asp:Panel ID="Panel1a" runat="server" GroupingText="Interact with Test Object">

                        <br />

                        <asp:TextBox ID="TextBox1" runat="server" Text="" ></asp:TextBox>

                        <asp:Button ID="Button1" runat="server" Text="Button" style="display:none" />

                        <asp:LinkButton ID="LinkButton1" runat="server" style="display:none">LinkButton</asp:LinkButton>

                        <asp:DropDownList ID="DropDownList1" runat="server" style="display:none">




                        <asp:CheckBox ID="CheckBox1" runat="server" />

                        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>



                   <asp:Panel ID="Panel1" runat="server" GroupingText="Event Details">

                   <asp:Label ID="Label2" runat="server"></asp:Label>






    <script type="text/javascript">


    // On change of DropDownList3, set handler

    $addHandler($get("DropDownList3"), "change", updateEventHandling);

    // On change of dropdownlist2, set handler

    $addHandler($get("DropDownList2"), "change", updateEventHandling);

    var eventVal;

    var myArray = ['altKey', 'button', 'charCode', 'clientX', 'clientY',

                   'ctrlKey', 'offsetX', 'offsetY', 'screenX', 'screenY',

                   'shiftKey', '', 'type', 'keyCode'];

    function updateEventHandling() {

      // Clear handlers and hide all "Test" objects

      var objectList = $get("DropDownList2");

      var elementIDVal;

      for (i=0;i<objectList.length;i++) {

        elementIDVal = objectList.options[i].text;



        $get("Label2").innerHTML = "";


      // Show the "Test" object and set the handler


      eventVal = $get("DropDownList3").value;

      $addHandler($get($get("DropDownList2").value), eventVal, processEventInfo);


    function processEventInfo(eventElement) {

        var result = '<br />';

        var arrayVal;

        for (var i = 0, l = myArray.length; i < l; i++) {

            arrayVal = myArray[i];

            if (typeof(arrayVal) !== 'undefined') {

                // Example: eventElement.clientX

                result += arrayVal + " = " + eval("eventElement." + arrayVal) + '<br/>';



        // Display results

        $get('Label2').innerHTML = result;