1. [자바스크립트] 이벤트 처리기 (핸들러,리스너)
ㅇ 이벤트 처리기 이란?
- 이벤트가 발생했을 때 이를 가로채서 이에 반응하도록,
- 그 실행 코드에 연결되게하는 처리기
- 또는, 실제의 실행을 담당하는 코드를 말함
ㅇ 이벤트 처리기의 구분
- 이벤트 핸들러 (Event Handler)
. 하나의 요소에 하나의 이벤트 만 처리 설정 가능
- 이벤트 리스너 (Event Listener)
. 하나의 요소에 여러 이벤트 처리 설정 가능
ㅇ 이벤트 처리기 작성용 스크립트 언어 : 자바스크립트
- 이벤트 발생시, 이에 반응하여 실행되는 이벤트 핸들러의 실제 언어로써 자바스크립트 사용
2. [자바스크립트] 이벤트 처리기의 등록 : 웹페이지 `요소`와 `이벤트 처리`의 연결
※ 주로, `DOM (다큐먼트 객체 모델)`에 의존함
- 모든 element node에 이벤트 핸들러를 연결할 수 있도록 지원하는 모델(체계)
. HTML 문서에대해 단지 텍스트가 아닌, 트리구조를 갖는 객체들의 계층적 구조로 표현
ㅇ inline event handler (인라인 이벤트 핸들러) 연결 방식
- ① HTML 요소의 onxxxx 속성에 등록하는 방법
. 例) <button onclick="myFunction()">Click me</button>
☞ w3schools.com 참조
- ② DOM 요소의 프로퍼티에 등록하는 방법
. 例) 요소.onclick = 호출할 함수명;
* 단점 : 특정 이벤트에 단 하나의 이벤트 처리기 만 등록 가능
ㅇ addEventListener 메소드를 사용하는 방식 (가장 표준적인 방법)
- ③ addEventListener 메소드 등록 방법
. 이벤트 리스너 등록 방법
.. HTML 태그 요소에다가, 해당 이벤트 리스너를 요소 객체의 메소드와 연결시켜,
.. 이벤트가 발생했을 때, 원하는 처리를 실행시키게 하는 방법
. 例) target.addEventListener(type, 콜백함수 [,타깃팅종류])
.. type : 이벤트 유형('click','mouseup'등)
.. 콜백함수 : 이벤트 처리 내역
.. 타깃팅종류 : true/false (true: 캡처링 단계. false: 버블링 단계/기본값)
* 장점
. 특정 요소/이벤트에 여러 이벤트 처리기들을 등록 가능
. 버블링/갭처링 단계 모두에서 가능하며, 정밀하게 제어도 가능
3. [자바스크립트] 이벤트 처리기의 삭제 : 웹페이지 `요소`에 연결된 `이벤트 처리`의 삭제
ㅇ 이벤트 핸들러 삭제
- onxxxx 속성에 null 값을 설정
. 例) targrt.onclick = null;
ㅇ 이벤트 리스너 삭제
- removeEventListener 메소드 이용
. 例) target.removeEventListener(type, 콜백함수 [,타깃팅종류])