STUDY/Front End

Web(Front) - Javascript-Event

ofijwe 2024. 8. 28. 15:23
반응형

📒 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 요소 이벤트 바인딩 → 이벤트 발생 시 실행될 콜백 함수(이벤트 핸들러) 지정
    • 하나의 이벤트에 여러개의 핸들러 추가 가능
    • 캡쳐링과 버블링 지원
반응형