Web(Front) - Javascript-Event

📒 EVENT

1️⃣ 이벤트 (Event)

• 웹 페이지에 여러 종류의 상호작용이 있을 경우 이벤트 발생
• 다양한 종류(마우스 클릭, 키보드 누르기 등)의 이벤트 존재
• JS를 사용해 DOM에서 발생하는 이벤트 감지 → 이벤트 대응 작업 수행
• 일반적으로 함수와 연결 → 함수는 이벤트가 발생되기 전에 실행 X → 이벤트 발생 시 실행
• 이벤트 핸들러(Handler) or 이벤트 리스너(Listener)라고 함. → 이벤트 발생시 실행해야 하는 코드 작성

2️⃣ 이벤트 종류

• 마우스 이벤트
  • 웹 어플리케이션에서 가장 많이 사용하는 이벤트
  • 마우스 이벤트 핸들러에 전달되는 이벤트 객체는 마우스 위치, 버튼 상태 등의 정보가 있음
  • onclick , ondbclick , onmouseup, onmousedown 등
• 키보드 이벤트
  • 키보드 커서가 웹 브라우저에 나타나는 지점에서 키보드 조작할 때 이벤트 발생
  • 키보드 조작은 운영체제 영향 받음 → 특정 키가 이벤트 핸들러에 전달되지 않을 수 있음
  • 키보드 커서가 나타내는 요소 X → document에서 이벤트 발생
  • onkeypress : 키보드가 눌려졌을 때 발생 (ASCII) ②
  • onkeydown : 키보드를 누르는 순간 발생 (KeyCode) ①
  • onkeyup : 눌렀던 키보드를 뗄 때 발생 ③
• Frame(UI) 이벤트 (잘 사용하지 X)
  • 특정 DOM 문서에 관련된 이벤트 X → Frame 자체에 대한 이벤트
  • load 이벤트가 가장 많이 사용
  • Load : 문서 및 자원들이 모두 웹 브라우저에 탑재되면 이벤트 수행
  • upload : 사용자가 브라우저를 떠날 때 이벤트 발생, 사용자가 브라우저를 떠나는 것을 막을 순 없음
• 폼(Form) 이벤트
  • 웹 브라우저에서 가장 안정적으로 동작하는 이벤트로 자주 사용
  • form이 전송될 때 submit 이벤트 발생 / form 초기화 시 reset 이벤트 발생
  • submit, reset은 이벤트 핸들러에서 취소 가능
  • onsubmit : form 전송 시 발생
  • onreset : from 리셋 시 발생
  • oninput : input or textarea 값 변경 시 발생
  • onchange : select box, checkbox, radio button의 상태 변경 시 발생
  • onselect : input or textarea 입력 값 중 일부 선택 시(마우스) 발생

3️⃣ 이벤트 핸들러 등록

• 인라인 이벤트 핸들러
  • 이벤트 감지, 대응 작업 등록하는 방법 여러가지 제공
  • HTML 요소 내부에 직접 이벤트 핸들러 등록 시 → HTML 코드를 JS 코드가 침범하는 문제 존재
  • but, 최근 CBD(Component Based Development) 방식을 쓰는 프레임워크나 라이브러리는 인라인 방식으로 이벤트 처리 → HTML, CSS, JS를 구성 요소로만 보기 때문
  • 여러 개 함수 한 번에 호출 가능
• 이벤트 핸들러 프로퍼티 방식
  • JS에서 이벤트 핸들러 등록하는 방법 → HTML 코드와 JS 코드 분리 가능 (혼용 문제 해결 가능)
  • 이벤트 대상 특정 DOM 선택 후 이벤트 핸들러 등록
  • 요소에 클릭 이벤트 발생 시 핸들러로 등록한 함수 실행
  • 이벤트 핸들러 프로퍼티에는 하나의 이벤트 핸들러만 바인딩 가능
• addEventListener 메소드 방식
  • 좀 더 세밀한 이벤트 제어 가능
  • 전달 인자
    • 첫 번째 : 이벤트 이름 (on을 제거한 이벤트 이름)
    • 두 번째 : 이벤트 핸들러 == 함수
    • 세 번째 : 캡쳐링 여부
  • DOM 요소 이벤트 바인딩 → 이벤트 발생 시 실행될 콜백 함수(이벤트 핸들러) 지정
  • 하나의 이벤트에 여러개의 핸들러 추가 가능
  • 캡쳐링과 버블링 지원