--- title: EventListener slug: Web/API/EventListener translation_of: Web/API/EventListener ---
{{APIRef("DOM Events")}}

EventListener 인터페이스는 {{domxref("EventTarget")}} 객체로부터 발생한 이벤트를  처리하기 위한 오브젝트를 말합니다.

Note: 레거시 코드와의 호환성을 유지하기 위해서, EventListener 는 함수 혹은 handleEvent() 함수를 가진 오브젝트를 인자로 받습니다.  아래의 예제에서 확인해보세요.

속성

이 인터페이스는 구현체나, 상속, 속성 어떤것도 갖고 있지 않습니다.

메소드

이 인터페이스는 어떤 메소드도 상속받지 않습니다.

{{domxref("EventListener.handleEvent()")}}
주어진 타입의 이벤트가 발생할 때마다 호출될 함수입니다.

예제

HTML

<button id="btn">여기를 눌러보세요!</button>

JavaScript

const buttonElement = document.getElementById('btn');

// 콜백 함수를 제공함으로써 '클릭' 이벤트를 처리하는 핸들러를 추가합니다.
// 엘리먼트가 클릭될 떄마다, "누름!" 팝업이 나타날것입니다.
buttonElement.addEventListener('click', function (event) {
  alert('누름!');
});

// 호환성을 위해서, 함수가 아닌 `handleEvent` 속성을 가진 오브젝트도
// 똑같이 처리됩니다.
buttonElement.addEventListener('click', {
  handleEvent: function (event) {
    alert('handleEvent 함수로 누름!');
  }
});

Result

{{EmbedLiveSample('Example')}}

Specifications

Specification Status Comment
{{SpecName('DOM WHATWG', '#callbackdef-eventlistener', 'EventListener')}} {{Spec2('DOM WHATWG')}} No change.
{{SpecName('DOM2 Events', '#Events-EventListener', 'EventListener')}} {{Spec2('DOM2 Events')}} Initial definition.

Browser compatibility

{{Compat("api.EventListener")}}