Events and the DOM


이 장에서는 DOM 이벤트 모델을 설명한다.  Event 인터페이스는 DOM의 노드에서 이벤트 등록 및  event listeners를 위한 인터페이스와 더불어 다양한 이벤트 인터페이스가 서로 어떻게 관련되는지 보여주는 몇 가지 더 긴 예와 함께 설명된다.

There is an excellent diagram that clearly explains the three phases of event flow through the DOM in the DOM Level 3 Events draft.

Also see Example 5: Event Propagation in the Examples chapter for a more detailed example of how events move through the DOM.

Event listener등록

DOM 요소에 대한 이벤트 핸들러를 등록하는 방법에는 3가지가 있다.


// Assuming myButton is a button element
myButton.addEventListener('click', greet, false)
function greet(event){
    // print and have a look at the event object
    // always print arguments in case of overlooking any other arguments
    console.log('greet:', arguments)
    alert('hello world')

이 방식은 근대의 웹페이지에서 사용해야하는 방법이다.

Note: Internet Explorer 6–8 didn't support this method, offering a similar EventTarget.attachEvent (en-US) API instead. For cross-browser compatibility, use one of the many JavaScript libraries available.

더 자세한 내용은EventTarget.addEventListener를 참조하세요.


<button onclick="alert('Hello world!')">

속성에서 JavaScript 코드는 이벤트 매개변수를 통해 이벤트 객체를 통과합니다. 반환 값은 HTML 사양에 설명된 특별한 방법으로 처리됩니다.

경고: 이 방법은 피해야 합니다! 그것은 마크업을 부풀리고, 읽기 어렵게 만듭니다. 내용/구조와 행동에 대한 우려는 잘 분리되어 있지 않아 버그를 찾기가 더 어려워집니다.

DOM 요소 특성

// Assuming myButton is a button element
myButton.onclick = function(event){alert('Hello world')}

The function can be defined to take an event parameter. The return value is treated in a special way, described in the HTML specification.

The problem with this method is that only one handler can be set per element and per event.

Accessing Event interfaces

Event handlers may be attached to various objects (including DOM elements, document, the window object, etc.). When an event occurs, an event object is created and passed sequentially to the event listeners.

The Event interface is accessible from within the handler function, via the event object passed as the first argument. The following simple example shows how an event object is passed to the event handler function, and can be used from within one such function.

function print(evt) {
  // the evt parameter is automatically assigned the event object
  // take care of the differences between console.log & alert
  console.log('print:', evt)
// any function should have an appropriate name, that's what called semantic
table_el.onclick = print