[Javascript][국비교육] Day 47

➰ JS Event Listener를 등록하는 방법

이벤트 리스너, Event Listener : 이벤트가 발생했을 때 실행할 코드를 적어둔 것
👉🏻 이벤트 핸들러, 이벤트 처리코드

1. HTML태그의 이벤트 속성(Attribute)을 이용한 인라인 방식으로 등록하기 👉🏻 재사용성이 떨어짐

<div onclick="alert('hi')">Hello</div>`

2. DOM 객체의 이벤트 속성(property)을 이용한 리스너 등록

var b = document.getElementById("btn")

b.onclick = function() {
	console.log("test")
}

3. DOM 객체를 이용하여 이벤트 API로 리스너 등록
   DOM객체.addEventListener() 등록
   DOM객체.removeEventListener() 해제

➰ JS 기본 이벤트

태그 요소에 별도의 이벤트 리스너 설정없이 실행되는 이벤트

• <a> 태그 요소의 클릭 : href 속성으로 지정된 URL 경로로 페이지를 이동시킴
• <form> 태그의 submit 버튼 클릭 : action 속성으로 지정된 URL 경로로 데이터를 전달시킴 👉🏻 http 요청이 발생 / http 응답으로 화면이 전환됨 ➡ 페이지 이동
• 브라우저 화면에서 마우스 클릭 : 메뉴를 보여줌

🔍 JS 주요 이벤트

➰ 마우스 이벤트

• click : 마우스를 클릭 했을 때
• dbclick : 마우스를 더블클릭했을 때
• mousedown : 마우스의 버튼을 눌렀을 때
• mouseup : 마우스의 버튼을 뗐을 때
• mousemover : 마우스 포인터를 이동했을 때 👉🏻 픽셀단위로 이벤트 발생
• mouseenter : 마우스 포인터가 요소 위오 올라갔을 때
• mouseleave : 마우스 포인터가 요소 밖으로 나갔을 때
  ✔ enter, leave는 자식요소를 제외하고 부모의 경계로만 판단
• mouseover : 마우스 포인터가 요소 위로 올라갔을 때
• mouseout : 마우스 포인터가 요소 밖으로 나갔을 때
  ✔ over, out은 자식요소를 포함하여 경계 판단

➰ 키보드 이벤트

• keydown : 키보드를 눌렀을 때
• keypress : 키보드를 눌렀을 때
• keyup : 키보드에서 손을 뗐을 때
  ✔ 한번의 키 입력에서 이벤트 발생 순서 : down ➡ press ➡ up
• press는 alt, ctrl, shift, esc 같은 가상키에 반응하지 않지만, down은 모든 키에 반응함

➰ <form> 폼 이벤트

• submit : 폼이 제출되었을 때
• reset : 폼이 초기화되었을 때
• focus : 입력 포커스가 특정 요소에 들어갔을 때
• blur : 포커스를 잃었을 때
• change : 폼 필드(폼의 자식요소)에 변화가 생겼을 때
• selecet : <select> 태그의 항목을 선택했을 때

➰ 윈도우(창) 이벤트

• load : HTML문서 또는 요소가 불러와졌을 때 👉🏻 메모리에 로드되었을 때
• resize : 요소의 크기(윈도우의 크기)가 변경되었을 때
• scroll : 페이지 스크롤이 이동되었을 때