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