Sys.UI.DomEvent Class

Article
12/04/2014

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>

Partager via

Sys.UI.DomEvent Class

Constructors

Members

Remarks

Example

See Also

Reference

Other Resources

Ressources supplémentaires