Documentation for: ASP.NET Ajax Version 1.0

This documentation is for a previous version. For the current released version, see the ASP.NET Ajax documentation on MSDN.

 

 

 

 

 

 

 

Sys.UI.DomEvent Class

Provides cross-browser access to DOM event properties and methods that are used to attach handlers to DOM element events.

Namespace: Sys.UI

Inherits: None

Syntax

var domEvent = Sys.UI.DomEvent(domObject);

Constructors

Name

Description

DomEvent Constructor

Initializes a new instance of the DomEvent class.

Members

Name

Description

addHandler Method

Provides a method to add a DOM event handler to the DOM element that exposes the event.

addHandlers Method

Adds a list of DOM event handlers to the DOM element that exposes the DOM events.

clearHandlers Method

Removes all DOM event handlers from the DOM element that were added through the addHandler or the addHandlers methods.

preventDefault Method

Prevents the default DOM event action from occurring.

removeHandler Method

Provides a method to remove a DOM event handler from the DOM element that exposes the event.

stopPropagation Method

Prevents an event from being propagated to parent elements.

altKey Field

Gets a Boolean value that indicates the state of the ALT key when the associated event occurred.

button Field

Gets a Sys.UI.MouseButton enumeration value that indicates the button state of the mouse when the associated event occurred.

charCode Field

Gets the character code of the key that raised the associated event.

clientX Field

Gets the x-coordinate of the mouse pointer's position relative to the client area of the browser window, excluding window scroll bars.

clientY Field

Gets the y-coordinate of the mouse pointer's position relative to the client area of the browser window, excluding window scroll bars.

ctrlKey Field

Gets a Boolean value that indicates the state of the CTRL key when the associated event occurred.

offsetX Field

Gets the x-coordinate of the mouse pointer's position relative to the object that raised the event.

offsetY Field

Gets the y-coordinate of the mouse pointer's position relative to the object that raised the event.

screenX Field

Gets the x-coordinate of the mouse pointer's position relative to the user's screen.

screenY Field

Gets the y-coordinate of the mouse pointer's position relative to the user's screen.

shiftKey Field

Gets a Boolean value that indicates the state of the SHIFT key when the associated event occurred.

target Field

Gets the object that the event acted on.

type Field

Gets the name of the event that was raised.

Remarks

Use the DomEvent class to add, remove, modify, and handle client events. You can also use this class to retrieve the properties that are associated with an event.

Example

The following example shows how to add an event handler and retrieve properties related to the event.

CS

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">
    <title>Example</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"/>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Panel ID="Panel1" runat="server" GroupingText="Update Panel">
                   <asp:Label ID="Label1" runat="server" Text="Click button to see event details."></asp:Label>
		           <br />
                   <asp:Button ID="Button1" runat="server" Text="Button" AccessKey="b"  />
		           <br />
                   <asp:Label ID="Label2" runat="server"></asp:Label>
                </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", processEventInfo);
    var myArray = ['altKey', 'button', 'charCode', 'clientX', 'clientY',
                   'ctrlKey', 'offsetX', 'offsetY', 'screenX', 'screenY', 
                   'shiftKey', 'target', 'type'];

    function processEventInfo(eventElement) {
        var result = '';
        for (var i = 0, l = myArray.length; i < l; i++) {
            var arrayVal = myArray[i];
            if (typeof(arrayVal) !== 'undefined') {
                // Example: eventElement.clientX
                result += arrayVal + " = " + eval("eventElement." + arrayVal) + '<br/>';
            }
        }
        $get('Label2').innerHTML = result;
    }
 </script>

VB

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">
    <title>Example</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"/>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Panel ID="Panel1" runat="server" GroupingText="Update Panel">
                   <asp:Label ID="Label1" runat="server" Text="Click button to see event details."></asp:Label>
		           <br />
                   <asp:Button ID="Button1" runat="server" Text="Button" AccessKey="b"  />
		           <br />
                   <asp:Label ID="Label2" runat="server"></asp:Label>
                </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", processEventInfo);
    var myArray = ['altKey', 'button', 'charCode', 'clientX', 'clientY',
                   'ctrlKey', 'offsetX', 'offsetY', 'screenX', 'screenY', 
                   'shiftKey', 'target', 'type'];

    function processEventInfo(eventElement) {
        var result = '';
        for (var i = 0, l = myArray.length; i < l; i++) {
            var arrayVal = myArray[i];
            if (typeof(arrayVal) !== 'undefined') {
                // Example: eventElement.clientX
                result += arrayVal + " = " + eval("eventElement." + arrayVal) + '<br/>';
            }
        }
        $get('Label2').innerHTML = result;
    }
 </script>