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
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>