event

특정 요소에 interactive한 반응을 할 수 있게 하는 것을 이벤트라고 한다.

클릭 이벤트<br/>
마우스 이벤트<br/>
스크롤 이벤트<br/>
터치 이벤트<br/>
resize(화면 크기 변화) 이벤트<br/>

JavaScript에서 이벤트를 감지하고 그에 맞는 결과를 내어줄 수 있도록 프로그래밍을 작성해야한다.


addEventListener

이벤트를 달 때 사용하는 함수 이름

event listener 단어를 해석하면 이벤트를 듣고 있다는 뜻.
addEventListener는 특정 이벤트가 언제 발생하는지 가만히 듣고 있다가,
발생하면 인자로 받은 함수를 실행시켜준다.

요소.addEventListener(이벤트종류, function() {
  //이벤트가 일어났을 때 실행할 내용
});

특정 요소에 addEventListener 함수를 붙이고(호출하고),
인자로 이벤트 종류와, 이벤트가 발생했을 때 실행할 함수를 전달한다.

element.addEventListener("click", function(){ alert("Hello World!"); });

클릭이벤트

버튼, 사진, 글 등 웹사이트에서 이루어지는 이벤트 중 가장 많은 것이 클릭 이벤트 이다.
로그인 버튼 클릭 -> 로그인 api 호출<br/>
상품 사진 클릭 -> 상품 상세 화면으로 이동<br/>
자세히 보기 버튼 클릭 -> 팝업화면 출력<br/>