이벤트리스너

이벤트리스터란?

유저가 웹페이지에 접속해서 클릭, 스크롤, 키보드 입력, 드래그 등을 사용할 수 있는데 이걸 이벤트라고 부릅니다.

어떤 요소 클릭시 click
마우스를 갖다 대면 mouseover
스크롤시 scroll, 키입력 시 keydown 등등···

이벤트리스너는 이벤트가 일어나면 내부 코드를 실행해주는 기본 문법임

예시1) 셀럭터찾은요소에 마우스를 갖다대면 특정코드 실행

셀렉터로찾은요소.addEventListener('mouseover', function(){ 
  실행할코드
});

예시2) 셀럭터찾은요소가 스크롤되면 특정코드 실행(그 요소에 스크롤바가 있어야 함)

셀렉터로찾은요소.addEventListener('scroll', function(){ 
  실행할코드
});

예시3) 셀럭터찾은요소에 키보드로 입력하면 특정코드 실행(그 요소가 글자를 입력할 수 있는 input 이런거여야 함)

셀렉터로찾은요소.addEventListener('keydown', function(){ 
  실행할코드
});

이벤트 종류는 수십가지가 있어서 여기서 찾아보면 될 듯

+) 콜백함수

셀렉터로찾은요소.addEventListener('scroll', function(){} );

이벤트리스너의 생김새를 잘 보면 함수같이 생겼음..
(실은 뒤에 소괄호 붙으면 다 함수)

근데 addEventListener()함수에는 파라미터 자리에 2개의 자료형을 집어넣는데,
둘째 파라미터로 함수가 들어갈 수 있습니다.

이렇게 함수 파라미터자리에 들어가는 함수를 '콜백함수'라고 합니다.
뭔가 순차적으로 실행하고 싶을 때 쓰는 함수 형태라고 알아두면 될 듯