EventListener

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

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

속성

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

메소드

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

EventListener.handleEvent() (en-US): 주어진 타입의 이벤트가 발생할 때마다 호출될 함수입니다.

예제

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

BCD tables only load in the browser