Sys.UI.DomEvent 클래스

아티클
09/05/2008

업데이트: 2007년 11월

DOM 요소 이벤트의 처리기와 연결된 필드 및 메서드에 대한 브라우저 간 액세스를 제공합니다.

네임스페이스:Sys.UI

상속: 없음

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

생성자

이름	설명
Sys.UI.DomEvent 생성자	DomEvent 클래스의 새 인스턴스를 초기화합니다.

멤버

이름	설명
Sys.UI.DomEvent addHandler 메서드	이벤트를 노출하는 DOM 요소에 DOM 이벤트 처리기를 추가하기 위해 메서드를 제공합니다.
Sys.UI.DomEvent addHandlers 메서드	DOM 이벤트를 노출하는 DOM 요소에 DOM 이벤트 처리기 목록을 추가합니다.
Sys.UI.DomEvent clearHandlers 메서드	addHandler 또는 addHandlers 메서드를 사용하여 추가한 모든 DOM 이벤트 처리기를 DOM 요소에서 제거합니다.
Sys.UI.DomEvent preventDefault 메서드	기본 DOM 이벤트 작업이 발생하지 않도록 합니다.
Sys.EventHandlerList.removeHandler 메서드	이벤트를 노출하는 DOM 요소에서 지정된 DOM 이벤트 처리기를 제거하기 위해 메서드를 제공합니다.
Sys.UI.DomEvent stopPropagation 메서드	이벤트가 부모 요소에 전파되지 않도록 합니다.
Sys.UI.DomEvent altKey 필드	연결된 이벤트가 발생한 경우 Alt 키의 상태를 나타내는 값을 가져옵니다.
Sys.UI.DomEvent button 필드	연결된 이벤트가 발생한 경우 마우스 단추의 상태를 나타내는 Sys.UI.MouseButton 열거형 값을 가져옵니다.
Sys.UI.DomEvent charCode 필드	연결된 이벤트를 발생시킨 키의 문자 코드를 가져옵니다.
Sys.UI.DomEvent clientX 필드	브라우저 창에서 창 스크롤 막대를 제외하고 클라이언트 영역을 기준으로 마우스 포인터 위치의 x 좌표를 가져옵니다.
Sys.UI.DomEvent clientY 필드	브라우저 창에서 창 스크롤 막대를 제외하고 클라이언트 영역을 기준으로 마우스 포인터 위치의 y 좌표를 가져옵니다.
Sys.UI.DomEvent ctrlKey 필드	연결된 이벤트가 발생한 경우 Ctrl 키의 상태를 나타내는 값을 가져옵니다.
Sys.UI.DomEvent charCode 필드	keyUp 또는 keyDown 이벤트를 발생시킨 키의 키 코드를 가져옵니다.
Sys.UI.DomEvent offsetX 필드	이벤트를 발생시킨 개체를 기준으로 마우스 포인터 위치의 x 좌표를 가져옵니다.
Sys.UI.DomEvent offsetY 필드	이벤트를 발생시킨 개체를 기준으로 마우스 포인터 위치의 y 좌표를 가져옵니다.
Sys.UI.DomEvent screenX 필드	사용자의 화면을 기준으로 마우스 포인터 위치의 x 좌표를 가져옵니다.
Sys.UI.DomEvent screenY 필드	사용자의 화면을 기준으로 마우스 포인터 위치의 y 좌표를 가져옵니다.
Sys.UI.DomEvent shiftKey 필드	연결된 이벤트가 발생한 경우 Shift 키의 상태를 나타내는 값을 가져옵니다.
Sys.UI.DomEvent target 필드	이벤트가 실행된 대상 개체를 가져옵니다.
Sys.UI.DomEvent type 필드	발생한 이벤트의 이름을 가져옵니다.

설명

DomEvent 클래스를 사용하면 클라이언트 이벤트를 추가 또는 제거하거나 수정하고 처리할 수 있습니다. 또한 이벤트와 연결된 속성을 검색할 수도 있습니다.

예제

다음 예제에서는 이벤트 처리기를 추가하고 이벤트와 관련된 필드 값을 검색하는 방법을 보여 줍니다.

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

Sys.UI.DomEvent 클래스

생성자

멤버

설명

예제

참고 항목

참조

기타 리소스

추가 리소스