Sys.UI.DomEvent Class

Provides cross-browser access to fields and methods that are associated with handlers for DOM-element events.

Namespace: Sys.UI

Inherits: None

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

Constructors

Name

Description

Sys.UI.DomEvent Constructor

Initializes a new instance of the DomEvent class.

Members

Name

Description

Sys.UI.DomEvent addHandler Method

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

Sys.UI.DomEvent addHandlers Method

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

Sys.UI.DomEvent clearHandlers Method

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

Sys.UI.DomEvent preventDefault Method

Prevents the default DOM event action from occurring.

Sys.EventHandlerList.removeHandler Method

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

Sys.UI.DomEvent stopPropagation Method

Prevents an event from being propagated to parent elements.

Sys.UI.DomEvent altKey Field

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

Sys.UI.DomEvent button Field

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

Sys.UI.DomEvent charCode Field

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

Sys.UI.DomEvent 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.

Sys.UI.DomEvent 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.

Sys.UI.DomEvent ctrlKey Field

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

Sys.UI.DomEvent charCode Field

Gets the key code of the key that raised the keyUp or keyDown event.

Sys.UI.DomEvent offsetX Field

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

Sys.UI.DomEvent offsetY Field

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

Sys.UI.DomEvent screenX Field

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

Sys.UI.DomEvent screenY Field

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

Sys.UI.DomEvent shiftKey Field

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

Sys.UI.DomEvent target Field

Gets the object that the event acted on.

Sys.UI.DomEvent 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 field values related to the event.

<%@ Page Language="VB" %>

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

</script>

<html xmlns="https://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>
<%@ Page Language="C#" %>

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

</script>

<html xmlns="https://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>

See Also

Reference

new Operator

Other Resources

Language Reference