[JS] 06 이벤트와 이벤트 처리기

• 문서 로딩 이벤트

이벤트	이벤트가 발생하는 순간
abort	웹 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때
error	문서가 정확히 로딩되지 않았을 때
load	문서 로딩이 끝났을 때
resize	문서 화면의 크기가 바뀌었을 때
scroll	문서 화면이 스크롤 되었을 때
unload	문서를 벗어날 때

 

• 마우스 이벤트

이벤트	이벤트가 발생하는 순간
click	사용자가 HTML 요소를 클릭했을 때
dbclick	사용자가 HTML 요소를 더블클릭했을 때
mousedown	사용자가 요소에서 마우스 버튼을 눌렀을 때
mousemove	사용자가 요소에서 마우스 포인터를 움직일 때
mouseover	마우스 포인터를 요소 위로 옮길 때
mouseout	마우스 포인터가 요소를 벗어날 때
mouseup	요소 위에 올려놓은 마우스 버튼에서 손을 뗄 때

 

• 키보드 이벤트

이벤트	이벤트가 발생하는 순간
keydown	키를 누르는 동안
keypress	키를 눌렀을 때
keyup	키에서 손을 뗄 때

 

• 폼 이벤트

이벤트	이벤트가 발생하는 순간
blur	폼 요소에 포커스를 잃었을 때
change	목록이나 체크 상태 등이 변경되었을 때 (<input>, <select>, <textarea> 태그에서 사용)
focus	폼 요소에 포커스를 놓았을 때 (<label>, <select>, <textarea>, <button> 태그에서 사용)
reset	폼이 리셋되었을 때
submit	[submit] 버튼을 클릭했을 때

 

 

---

 

• 스크립트 소스를 변경해도 HTML 마크업에는 영향을 주지 않게 하려면 이벤트 처리기도 스크립트 소스에서 처리하는 것이 좋음
• 하나의 이벤트에 여러 함수를 연결하려면 addEventListener() 메서드 사용

 

 

---

• event 객체
  • 웹 문서에 발생하는 이벤트 정보를 저장
  • 어떤 요소에서 이벤트가 발생했는지, 어떤 종류의 이벤트가 발생했는지 등의 정보가 포함됨

 

• event 객체의 프로퍼티와 메서드
  • 웹 문서에 이벤트가 발생하면 자동으로 이벤트와 관련된 객체가 생성됨
  • event 객체에는 이벤트 이름이나 발생 위치, 발생한 시간 등 이벤트와 관련된 다양한 정보가 포함
  • event 객체에서 사용할 수 있는 메서드는 preventDefault() 밖에 없음

프로퍼티	기능
altKey	이벤트가 발생했을 때 Alt를 누르고 있었는지의 여부를 확인하고 Boolean값을 반환
button	마우스 키값을 반환
charCode	keypress 이벤트가 발생했을 때 어떤 키가 눌렸는지 유니코드값으로 반환
clientX	이벤트가 발생한 가로 위치를 반환
clientY	이벤트가 발생한 세로 위치를 반환
ctrlKey	이벤트가 발생했을 때 Ctrl을 누르고 있었는지의 여부를 확인하고 Boolean값을 반환
pageX	현재 문서를 기준으로 이벤트가 발생한 가로 위치를 반환
pageY	현재 문서를 기준으로 이벤트가 발생한 세로 위치를 반환
screenX	현재 화면을 기준으로 이벤트가 발생한 가로 위치를 반환
screenY	현재 화면을 기준으로 이벤트가 발생한 세로 위치를 반환
shiftKey	이벤트가 발생했을 때 Shift를 누르고 있었는지의 여부를 확인하고 Boolean값을 반환
target	이벤트가 발생한 대상을 반환
timeStamp	이벤트가 발생한 시간을 밀리초 단위로 반환
type	발생한 이벤트 이름을 반환
which	키보드와 관련된 이벤트가 발생했을 때 키의 유니코드값을 반환

메서드	기능
preventDefault	(취소할 수 있을 경우) 기본 동작을 취소

 

 

---

 

 

• 이벤트 전파 event propagation
  • 웹 요소에서 이벤트가 발생했을 때 해당 요소와 해당 요소를 감싸고 있는 부모 요소 그리고 그 요소의 부모 요소에서도 똑같이 이벤트가 처리됨
  • 크게 '버블링'과 '캡처링'이라는 형태로 나뉨
• 이벤트 버블링
  • 특정 요소에서 이벤트가 발생했을 때, 그 이벤트가 해당 요소뿐만 아니라 그 요소의 부모 요소, 부모 요소의 부모 요소에도 똑같이 발생한 것으로 간주하는 것
  • 모던 웹 브라우저에서 대부분의 이벤트는 버블링됨
  • 웹 브라우저에선 기본적으로 '이벤트 버블링' 전파 방식 사용
• 이벤트 캡처링
  • 웹 요소에서 이벤트가 발생하면 일단 최상위 요소에서 시작해서 이벤트가 발생한 요소까지 차례대로 이벤트가 전파되는 방식
  • 버블링-아래에서 위로(자식 요소에서 부모 요소로), 캡처링-위에서 아래로(부모 요소에서 자식 요소로)