자바스크립트 이벤트

(2018-11-06)

이벤트

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 요소의 프로퍼티이벤트 핸들러를 함수로 연결하는 방법
        . 例) 요소명.onclick = 호출할 함수명;

     * 단점 : 특정 이벤트에 단 하나의 이벤트 처리기 만 등록 가능

  ㅇ addEventListener 메소드를 사용하는 방식 (가장 표준적인 방법)
     - ③ addEventListener/removeEventListener 메소드 방법
        . 이벤트 리스너 등록 방법
           .. HTML 태그 요소에 해당하는 이벤트 리스너를 객체메소드와 연결시켜,
           .. 이벤트가 발생했을 때, 원하는 처리를 실행시키게 하는 방법
        . 例) target.addEventListener(type,콜백함수[,타깃팅종류])를 이용하는 방법
           .. type : 이벤트 유형('click',mouseu'등)
           .. 콜백함수 : 이벤트 처리 내역
           .. 타깃팅종류 : true/false (true: 캡처링 단계.false: 버블링 단계/기본값)
        . 이벤트 리스너 삭제 방법
           .. target.removeEventListener(type,콜백함수[,타깃팅종류])

     * 장점 
        . 특정 요소/이벤트에 여러 이벤트 처리기들을 등록 가능
        . 버블링/갭처링 단계 모두에서 가능하며, 정밀하게 제어도 가능


[JS 이벤트] 1. JS 이벤트 2. JS 이벤트 종류 3. JS 이벤트 객체

 
        최근수정     요약목록(시험중)     참고문헌