mozilla
검색 결과

    event

    Introduction

    이 장에서는 Gecko가 구현한 DOM Level 2 Event Model에 대해 설명합니다. Event interface 이름에서도 알 수 있듯이, DOM 내의 노드들(nodes) 상에 등록된 이벤트, 이벤트 핸들러들 그리고 이벤트 리스너들에 대한 인터페이스입니다. 그리고 어떻게 다양한 이벤트 인터페이스들이 상관관계를 맺고 있는지에 대한 예제입니다.

    이 링크 DOM Level 3 Events draft는 DOM을 통하여 이벤트 흐름이 어떻게 흘러가는지에 대한 3가지 상(phase)들에 대하여 명확하게 설명하고 있는 그림입니다.

    DOM Event interface

    이벤트 핸들러들(Event handlers)은 DOM에 존재하는 다양한 엘리먼트들과 관련되어 있습니다. 이벤트가 발생하게 되면, 이벤트 객체는 동적으로 생성되며, 이벤트를 처리할 수 있는 이벤트 리슨너(event listener)들로 전달됩니다. DOM의 Event 인터페이스는 핸들러 함수로 접근할 수 있으며, 이벤트 객체는 첫 번째 인자로만 전달됩니다.

    Given that we don't list the three ways right here, the sentence is unclear, and is not perfectly right either IMO. -Nickolay There are three ways to attach an event listener to an element. With 2 of those techniques, the event object is passed to the handler function implicitly. The remaining technique requires you to specify the <code>event</code> object as a parameter, which is passed explicitly to the event handler function. 아래의 예제는 이벤트 객체가 어떻게 이벤트 핸들러 함수로 전달되는지와 함수 내에서 어떻게 사용되는지를 보여주고 있습니다.

    아래 코드에서 전달된 "evt" 파라미터가 없다는 것에 주의하기 바랍니다. 이벤트 객체는 자동적으로 foo 함수로 전달됩니다. 오직 필요한 것은 이벤트 핸들러에서 이벤트 객체를 받을 수 있는 파라미트를 정의하는 것입니다.

    function foo(evt) {
      // event handling functions like this one
      // get an implicit reference to the event object they handle
      // (in this case we chose to call it "evt").
      alert(evt);
    }
    table_el.onclick = foo;
    

    이 예제는 너무나도 간단하지만, Gecko DOM에서 사용되는 이벤트들의 중요한 특징을 잘 보여주고 있습니다. 중요한 특징이란, DOM의 이벤트 객체는 일반적으로 이벤트 핸들러 함수에서 접근할 수 있다는 것입니다. 여러분이 이벤트 객체에 대한 참조(reference)를 가지고 있다면, 여러분은 아래에 설명하고 있는 속성(properties)들과 메소드(method)에 접근할 수 있습니다.

    또한 어떻게 이벤트들이 DOM을 통하여 움직이는지에 대한 상세 예제를 보고 싶다면, 아래 예제 중 Example 5: Event Propagation를 참조하시기 바랍니다.

    DOM event handler List

    여기서 설명한 event 객체에 더하여, Gecko DOM은 DOM 내부의 노드들에 대하여 이벤트 리스너들를 등록하고, 등록된 이벤트 리스너들을 제거하고, DOM으로부터 이벤트를 발생시키는 메소드들을 제공하고 있습니다. HTML 혹은 XML 엘리먼트들 상의 앞의 3가지 그리고 그 외 다양한 Event Handlers들은 DOM에서 이벤드들에 있어 중요한 부분입니다. 이러한 3가지 메소드들은 DOM Element Reference 리스트에서 설명하고 있습니다.

    여러분은 미리 정의한 파라미터, 즉 event라는 이름으로 이벤트 객체에 대한 참조(reference)를 이벤트를 처리할 함수에 넘길 수 있습니다. 이거은 this 동작 방식과 매우 유사하지만, 엘리먼트 객체에 대한 참조(reference)보다는 이벤트 객체에 대한 참조(reference)라는 것이 다릅니다.

    <html>
    <head>
    <title>event object parameter example</title>
    
    <script type="text/javascript">
    
    function showCoords(evt){
      alert(
        "clientX value: " + evt.clientX + "\n" +
        "clientY value: " + evt.clientY + "\n"
      );
    }
    
    </script>
    </head>
    
    <body onmousedown="showCoords(event)">
    <p>To display the mouse coordinates click anywhere on the page.</p>
    </body>
    </html>
    

    미리 정의된 event 객체 파라미터를 사용함으로서, 만약 필요하다면 다른 파라미터들과 같이 이벤트 핸들러 함수에 넘기는 것이 가능합니다:

    <html>
    <head>
    <title>event object & extra parameters example</title>
    
    <script type="text/javascript">
    
    var par2 = 'hello';
    var par3 = 'world!';
    
    function showCoords(evt, p2, p3){
      alert(
        "clientX value: " + evt.clientX + "\n"
        + "clientY value: " + evt.clientY + "\n"
        + "p2: " + p2 + "\n"
        + "p3: " + p3 + "\n"
      );
    }
    
    </script>
    </head>
    
    <body onmousedown="showCoords(event, par2, par3)">
    <p>To display the mouse coordinates please click anywhere on the page.</p>
    </body>
    </html>
    

    Properties

    event.altKey
    Returns a boolean indicating whether the <alt> key was pressed during the event.
    event.bubbles
    Returns a boolean indicating whether the event bubbles up through the DOM or not.
    event.button
    Returns a mouse key.
    event.cancelBubble
    Returns a boolean indicating whether the bubbling up of the event has been canceled or not.
    event.cancelable
    Returns a boolean indicating whether the event is cancelable.
    event.charCode
    Returns the Unicode value of a character key that was pressed as part of a keypress event.
    event.clientX
    Returns the horizontal position of the event.
    event.clientY
    Returns the vertical position of the event.
    event.ctrlKey
    Returns a boolean indicating whether the <ctrl> key was pressed during the event.
    event.currentTarget
    Returns a reference to the currently registered target for the event.
    event.detail
    Returns detail about the event, depending on the type of event.
    event.eventPhase
    Used to indicate which phase of the event flow is currently being evaluated.
    event.explicitOriginalTarget
    The explicit original target of the event (Mozilla-specific).
    event.isChar
    Returns a boolean indicating whether the event produced a key character or not.
    event.keyCode
    Returns the Unicode value of a non-character key in a keypress event or any key in any other type of keyboard event.
    event.layerX
    Returns the horizontal coordinate of the event relative to the current layer.
    event.layerY
    Returns the vertical coordinate of the event relative to the current layer.
    event.metaKey
    Returns a boolean indicating whether the meta key was pressed during the event.
    event.originalTarget
    The original target of the event, before any retargetings (Mozilla-specific).
    event.pageX
    Returns the horizontal coordinate of the event relative to the page.
    event.pageY
    Returns the vertical coorindate of the event relative to the page.
    event.relatedTarget
    Identifies a secondary target for the event.
    event.screenX
    Returns the horizontal position of the event on the screen.
    event.screenY
    Returns the vertical position of the event on the screen.
    event.shiftKey
    Returns a boolean indicating whether the <shift> key was pressed when the event was fired.
    event.target
    Returns a reference to the target to which the event was originally dispatched.
    event.timeStamp
    Returns the time that the event was created.
    event.type
    Returns the name of the event (case-insensitive).
    event.view
    The view attribute identifies the AbstractView from which the event was generated.
    event.which
    Returns the Unicode value of a key in a keyboard event, regardless of which type of key is pressed.

    Methods

    event.initEvent
    Initializes the value of an Event created through the DocumentEvent interface.
    event.initKeyEvent
    Initializes a keyboard event. Gecko-specific.
    event.initMouseEvent
    Initializes a mouse event once it's been created
    event.initUIEvent
    Initializes a UI event once it's been created.
    event.preventBubble
    Prevents the event from bubbling. This method is deprecated in favor of standard stopPropagation and is removed in Gecko 1.9.
    event.preventCapture
    This method is deprecated in favor of standard stopPropagation and is removed in Gecko 1.9.
    event.preventDefault
    Cancels the event (if it is cancelable).
    event.stopPropagation
    Stops the propagation of events further along in the DOM.
     

    문서 태그 및 공헌자

    Contributors to this page: teoli, jsx, fscholz, 권지웅
    최종 변경: jsx,