반응형
JS 이벤트, JS Event
- 사용자의 모든 입력(행위)들을 프로그램에서 미리 정의해놓은 객체
- 사용자의 입력(동작) 뿐만 아니라 특정 사건도 포함한다.
- 컴퓨터(운영체제)에서 발생한 이벤트를 감지하고 해당 이벤트를 이벤트가 발생한 응용프로그램에게 전달한다.
- 전달된 이벤트는 해당 응용프로그램에서 적절한 처리를 수행한다
- 이벤트 기반 처리(Event Driven)
- 기본 이벤트
- 태그 요소에 별도로 이벤트 처리코드를 연결하지 않아도 기본적으로 실행되는 이벤트들
- a 태그 요소를 클릭 -> 지정된 경로로 페이지 이동(location.href = "지정경로")
- 브라우저 화면에 마우스 우클릭 -> 메뉴 보여주기
- form 태그 요소에서 submit 버튼 클릭 -> 액션에 지정된 경로로 데이터를 전달하며 페이지 이동 발생(form.submit())
- 태그 요소에 별도로 이벤트 처리코드를 연결하지 않아도 기본적으로 실행되는 이벤트들
- 주요 이벤트
- 마우스 관련 이벤트
- click - 마우스를 클릭했을 때
- dblclick - 마우스를 더블 클릭했을 때
- mousedown - 마우스 버튼을 눌렀을 때
- mouseup - 마우스 버튼을 땠을 때
- mousemove - 마우스 포인터를 이동했을 때
- mouseenter - 마우스 포인터가 요소 위로 올라갔을 때
- mouseover 와 동일, 그러나 over 는 자식 요소까지 포함해서 판단한다.
- mouseleave - 마우스 포인터가 요소 밖으로 나갔을 때
- mouseout 과 동일, 그러나 over 는 자식 요소까지 포함해서 판단한다.
- 키보드 관련 이벤트
- keydown - 키보드를 눌렀을 때(한번)
- keyup - 키보드에서 손을 뗐을 때
- keypress - 키보드를 눌렀을 때(연속)
- 이벤트 발생 순서
- keydown
- keypress
- keyup
- keypress는 alt, ctrl, shift, esc 같은 가상키에 반응하지 않는다.
- keydown 은 모든 키에 반응 한다.
- 폼 관련 이벤트
- submit - 폼이 제출 되었을 때(제출 버튼을 눌렀을 때)
- reset - 폼이 초기화 되었을 때
- focus - 특정 요소에 입력 포커스가 들어갔을 때
- blur - 포커스를 잃었을 때
- change - 폼 필드(폼의 자식요소)에 변화가 생겼을 때
- select - select 태그 요소의 항목을 선택했을 때
- 윈도우(창) 이벤트
- load - HTML 문서 또는 요소가 불러와졌을 때(메모리에 로드 됐을 때)
- resize - 요소 크기(윈도우 창의 크기)가 변경 되었을 때
- scroll - 페이지 스크롤이 이동되었을 때
- 마우스 관련 이벤트
반응형
'FrontEnd > JavaScript' 카테고리의 다른 글
[JavaScript] 자바스크립트에서 제공하는 기본 대화상자 (0) | 2020.10.09 |
---|---|
[JavaScript] 자바스크립트 이벤트 처리 코드 작성하는 방법 (0) | 2020.10.09 |
[JavaScript] 자바스크립트의 DOM 객체 함수, DOM API (0) | 2020.10.09 |
[JavaScript] 자바스크립트를 사용하기위해 꼭 알아야하는 DOM (0) | 2020.10.09 |
[JavaScript] 자바스크립트 핵심 요소 4가지 (0) | 2020.10.09 |