본문 바로가기

JavaScript

이벤트 리스너(event listener)

: 특정 이벤트가 발생했을 때, 실행되는 함수. 이벤트 핸들러(event handler)라고도 한다.

여기서 이벤트는 웹페이지에서 발생하는 사용자의 행동(마으수 클릭, 키보드 입력 등)이나 웹페이지의 상태 변화(로딩 완료, 타이머 종료 등)를 나타낸다.

 

JavaScript에서는 DOM요소에 이벤트 리스너를 등록할 때는 addEventListener 함수를 사용.

DOM객체.addEventListener(이벤트명, 이벤트리스너)

 

const button = document.getElementById('myButton'); //HTML에서 id가 'myButton'인 요소 가져오기

button.addEventListener('click', function(){
 // 버튼이 클릭 되었을때 실행되는 함수(이벤트리스너)
 console.log('버튼이 클릭되었습니다!');
})

 

addEventListener함수를 이용하여 'click'라는 이벤트에 대한 '이벤트 리스너'를 등록하였다.