TIL -29. JavaScript : event

화려한 게임사이트, 쇼핑몰 등의 홈페이지에 들어가면 다양한 이벤트들이 들어있다. 그 중에서 마우스를 올렸을 때(mouse over) 다른 각도의 제품 사진으로 바꿔서 보여지는 것이 있다.

이것은 HTML이나 CSS만으로 구현할 수 없고, 자바스크립트 코딩이 필요하다.

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

• 클릭 이벤트
• 마우스 이벤트
• 스크롤 이벤트
• 터치 이벤트
• resize(화면 크기 변화)이벤트
  등등이 있다.

1.addEventListener
: 이벤트를 달 때 사용하는 함수 이름

• event listener: '이벤트를 듣고 있다'는 뜻
• addEventListener: 특정 이벤트가 언제 발생하는지 가만히 듣고 있다가 발생하면 인자로 받은 함수를 실행시켜 준다.
• 형태:

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

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

• 이벤트 종류:
  click, contextmenu, dbclick, mousedown ......등등 많은 이벤트가 있다.
  
  

https://www.w3schools.com/js/js_htmldom_eventlistener.asp
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener -> 이벤트 종류 사이트

2.클릭이벤트
:버튼,사진,글 등 웹사이트에서 이루어지는 이벤트 중 가장 많은 이벤트

• event를 추가하고 싶으면, 앞에서 배웠던 DOM을 사용한다.

3.키이벤트
: 사람이 키보드를 누르면 발생하는 이벤트

• 키보드를 눌렀을 때 발생하는 keydown
• 키보드를 누르고 떼는 순간 발생하는 keyup
• 키보드를 눌러 어떤 텍스트가 작성되는 순간 발생하는 keypress