1. 이벤트, 이벤트 처리과정 이란?
ㅇ 이벤트
- 미리 정해지지 않은 시간에 발생되는 것
. 例) 마우스 이벤트,키보드 이벤트 등
ㅇ 이벤트 처리 과정
- 작성 : 원하는 수행 기능을 갖도록 이벤트 핸들러/이벤트 리스너라는 함수를 작성
- 등록 : 이벤트 핸들러 함수를 등록
- 지정 : 해당 요소의 이벤트 속성에 이벤트 핸들러 함수를 지정
- 호출 : 특정 이벤트 발생시 웹브라우저가 지정된 함수를 호출함
2. 이벤트 처리기(핸들러,리스너) (Event Handler/Event Listener)
ㅇ 이벤트가 발생했을 때 이를 가로채서 이에 반응하도록,
- 그 실행 코드에 연결되게하는 처리기
- 또는, 실제의 실행을 담당하는 코드를 말함
ㅇ 이벤트 핸들러 작성용 스크립트 언어 : 자바스크립트
- HTML으로 작성된 임의 태그에서 이벤트 발생시,
- 이에 반응하여 실행하는 이벤트 핸들러의 실제 언어코드로써 자바스크립트가 있음
ㅇ 세부 구분
- 이벤트 핸들러 : 하나의 요소에 하나의 이벤트 만 처리 설정 가능
- 이벤트 리스너 : 하나의 요소에 여러 이벤트 처리 설정 가능
3. 자바스크립트 이벤트의 종류
※ ☞ 자바스크립트 이벤트 종류 참조
- 마우스 이벤트 : click, dblclick, mousemove, mouseover 등
- 키보드 이벤트 : keydown, keyup, keypress 등
- 폼 이벤트 : submit, reset, change, focus, blur 등
- 문서(document)/창(window) 이벤트 : load, resize, scroll, unload 등
- 텍스트 입력 이벤트 등
4. 자바스크립트 이벤트의 객체
※ ☞ 자바스크립트 이벤트 객체 참조
- 특정 이벤트와 연관된 객체로써, 해당 이벤트에 대한 상세한 정보를 담고 있음
* 웹브라우저 마다 다소 다르게 구현되므로 유의해야 함
5. 이벤트 흐름 단계 구분
ㅇ 캡처 단계
ㅇ 타깃 단계
ㅇ 버블링 단계
- 웹페이지 문서 트리의 아래 계층에서 발생한 이벤트가 위 계층으로 전파되는 것
6. 웹페이지 `요소`와 `이벤트`의 연결
※ 주로, `DOM (다큐먼트 객체 모델)`에 의존함
- 모든 element node에 이벤트 핸들러를 연결할 수 있도록 지원하는 모델(체계)
. HTML 문서에대해 단지 텍스트가 아닌, 트리구조를 갖는 객체들의 계층적 구조로 표현
ㅇ inline event handler (인라인 이벤트 핸들러) 연결 방식
- ① HTML 요소의 속성에 이벤트 핸들러 코드를 그대로 적어서 직접 삽입하는 방법
. 例) <button onclick="myFunction()">Click me</button>
☞ w3schools.com 참조
- ② DOM 요소의 프로퍼티에 이벤트 핸들러를 함수로 연결하는 방법
. 例) 요소명.on이벤트명 = 호출할 함수명;
ㅇ 이벤트 리스너를 객체의 메소드와 연결시키는 방식 (가장 표준적인 방법)
- ③ EventTarget.addEventListener()를 이용하는 방법
. HTML 태그 요소에 해당하는 이벤트 핸들러를 객체의 메소드와 연결시켜,
. 후에 이벤트가 발생했을 때에 객체의 메소드를 실행시키게 하는 방법