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 |
|---|---|
Initializes a new instance of the DomEvent class. |
Members
Name |
Description |
|---|---|
Provides a method to add a DOM event handler to the DOM element that exposes the event. |
|
Adds a list of DOM event handlers to the DOM element that exposes the DOM events. |
|
Removes all DOM event handlers from the DOM element that were added through the addHandler or the addHandlers methods. |
|
Prevents the default DOM event action from occurring. |
|
Provides a method to remove a specified DOM event handler from the DOM element that exposes the event. |
|
Prevents an event from being propagated to parent elements. |
|
Gets a value that indicates the state of the ALT key when the associated event occurred. |
|
Gets a Sys.UI.MouseButton enumeration value that indicates the button state of the mouse when the associated event occurred. |
|
Gets the character code of the key that raised the associated event. |
|
Gets the x-coordinate of the mouse pointer's position relative to the client area of the browser window, excluding window scroll bars. |
|
Gets the y-coordinate of the mouse pointer's position relative to the client area of the browser window, excluding window scroll bars. |
|
Gets a value that indicates the state of the CTRL key when the associated event occurred. |
|
Gets the key code of the key that raised the keyUp or keyDown event. |
|
Gets the x-coordinate of the mouse pointer's position relative to the object that raised the event. |
|
Gets the y-coordinate of the mouse pointer's position relative to the object that raised the event. |
|
Gets the x-coordinate of the mouse pointer's position relative to the user's screen. |
|
Gets the y-coordinate of the mouse pointer's position relative to the user's screen. |
|
Gets a value that indicates the state of the SHIFT key when the associated event occurred. |
|
Gets the object that the event acted on. |
|
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" "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>
<%@ 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>