(SEB_FE) Section1 Unit10 이벤트 객체

1. 기초적인 event를 알고, event handler를 element에 적용할 수 있다.
2. onclick 에 직접 할당하는 것과 addEventListener의 차이를 이해한다.
3. eventHandler 함수를 만들고, eventHandler의 첫 번째 인자를 사용할 수 있다.

⭐이벤트란?

⭐이벤트 종류

• 마우스 이벤트

  • click : 요소에 마우스를 클릭했을 때 이벤트가 발생
  • dbclick : 요소에 마우스를 더블클릭했을 때 이벤트가 발생
  • mouseover : 요소에 마우스를 오버했을 때 이벤트가 발생
  • mouseout : 요소에 마우스를 아웃했을 때 이벤트가 발생
  • mousedown : 요소에 마우스를 눌렀을 때 이벤트가 발생
  • mouseup : 요소에 마우스를 떼었을 때 이벤트가 발생
  • mousemove : 요소에 마우스를 움직였을 때 이벤트가 발생
  • contextmenu : context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생

• 키보드 이벤트

  • keydown : 키를 눌렀을 때 이벤트가 발생
  • keyup : 키를 떼었을 때 이벤트가 발생
  • keypress : 키를 누른 상태에서 이벤트가 발생

• 변경 감지 이벤트

  • change :값이 변경된 직후가 아니라, 변경되고 포커스를 잃을 때 발생한다.
  • input : 값이 바뀔 때마다 발생하는 이벤트

• 폼 이벤트

  • focus : 요소에 포커스가 이동되었을 때 이벤트 발생
  • blur : 요소에 포커스가 벗어났을 때 이벤트 발생
  • change :요소에 값이 변경 되었을 때 이벤트 발생
  • submit : submit 버튼을 눌렀을 때 이벤트 발생
  • reset : reset 버튼을 눌렀을 때 이벤트 발생
  • select : input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생

• 로드 및 기타 이벤트

  • load : 페이지의 로딩이 완료되었을 때 이벤트 발생
  • abort : 이미지의 로딩이 중단되었을 때 이벤트 발생
  • unload : 페이지가 다른 곳으로 이동될 때 이벤트 발생
  • resize : 요소에 사이즈가 변경되었을 때 이벤트 발생
  • scroll : 스크롤바를 움직였을 때 이벤트 발생

• 각각의 이용가능한 이벤트들은 이벤트 핸들러(event handler)를 가지고 있다.
  ➡ 이는 이벤트가 발생되면 실행되는 코드 블럭 (JavaScript 함수)이다.
  ➡ 이벤트 핸들러는 앞에 on을 붙여 주어 각각의 이벤트를 이용할 수 있다.
  (ex. onclick, onchange 등등)
  
  
• 리스너(Listener)는 발생되는 이벤트에 대해 듣고, 핸들러(handler)는 발생되는 이벤트에 응답해서 실행되는 코드

💫 What is "event.preventDefault"?

• <a> 와 <submit> 은 이벤트 발생 시, 다른 링크로 이동하거나(a태그)
  값을 제출하고 창을 새로고침한다(submit 태그).

• 어떤 경우엔 매우 유용하겠지만, 의도하지 않은 경우엔 이 때문에 불편함이 야기된다.
  ➡ 이때 사용해주는 것이, 이벤트 전파를 막는 메서드 event.preventDefault()

<a href="https://velog.io" id="link">벨로그</a>
<script>
	document.querySelector('#link').addEventListener('click', function(e){
		e.preventDefault();
	});
	// preventDefault를 사용했기 때문에 a 태그를 클릭할 때
	// 링크값이 있어도 이동하지 않는다.
</script>

💫 또 하나의 이벤트 전파를 막는 메서드 stopPropagation()

• preventDefaults 와의 차이는 뭔데?
  ➡ stopPropagation 은 이벤트 버블링을 중단시킬 수 있다.

🟢 What is 이벤트 버블링(Event Bubbling)?

• 특정 화면 요소에서 이벤트가 발생했을 때
  해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성

• 이벤트가 상위 DOM으로 전파되지 않게 하기 위해서는
  stopPropagation() 을 사용해야 한다.