EventListener
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
BCD tables only load in the browser