이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

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

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

속성

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

메소드

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

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

Specifications

Specification Status Comment
DOM
The definition of 'EventListener' in that specification.
Living Standard No change.
Document Object Model (DOM) Level 2 Events Specification
The definition of 'EventListener' in that specification.
Obsolete Initial definition.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1121971
handleEvent1121971
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support11812461 ?
handleEvent11812461 ?

문서 태그 및 공헌자

이 페이지의 공헌자: whdckszxxx
최종 변경자: whdckszxxx,