Javascript Event   자바스크립트 이벤트

(2019-05-07)

이벤트, 캡처링 단계, 버블링 단계

1. [자바스크립트]  이벤트이벤트 처리과정이벤트
     - 미리 정해지지 않은 시간에 발생되는 것
        . 例) 마우스 이벤트, 키보드 이벤트 등

  ㅇ 이벤트 처리 단계 요약
     - 작성 : 원하는 기능을 수행하는 이벤트 처리기를 작성
     - 등록/지정 : 해당 요소의 이벤트 속성에 그에 상응하는 이벤트 처리기를 등록 지정
     - 호출 : 특정 이벤트 발생시 지정된 이벤트 처리기가 호출됨


2. [자바스크립트]  이벤트의 종류

  ※ ☞ 자바스크립트 이벤트 종류 참조
     - 마우스 이벤트     : click, dblclick, mousemove, mouseover 등
     - 키보드 이벤트     : keydown, keyup, keypress 등
     - 폼 이벤트         : submit, reset, change, focus, blur 등
     - 문서(document)/창(window) 이벤트 : load, resize, scroll, unload 등
     - 텍스트 입력 이벤트
3. [자바스크립트]  이벤트객체

  ※ ☞ 자바스크립트 이벤트 객체 참조
     - 특정 이벤트와 연관된 객체로써, 해당 이벤트에 대한 상세한 정보를 담고 있음
       . 즉, 이벤트 핸들러에 전달되는 이벤트 정보를 담고 있음 
          .. 例) 마우스 위치, 마우스 버튼의 상태, 옵션키(연관된 Ctrl,Alt,Shift 등의 키)
     * 웹브라우저 마다 다소 다르게 구현되므로 유의해야 함 


4. [자바스크립트]  이벤트의 전파 방향/단계

  ㅇ 캡처링 단계 (capturing)
     - Window 객체부터 좀더 구체적인 요소 타깃을 찾아가며 하향 전파되는 단계
     - 이러한 이벤트 하향 전파에 반응하도록 등록된 이벤트 처리기가 실행됨

  ㅇ 타깃 단계 (target)
     - 이벤트가 타깃 요소에 최종 전파되는 단계
     - 이때 요소에 등록된 이벤트 처리기가 실행됨

  ㅇ 버블링 단계 (bubbling)
     - 맨 아래 요소 타깃에서 발생한 이벤트가 점차 상향 Window 객체까지 전파되는 단계
     - 이러한 이벤트 상향 전파에 반응하도록 등록된 이벤트 처리기가 실행됨

  ※ 실행 구분
     - 이벤트 핸들러 : 타깃 단계, 버블링 단계 모두에서 실행됨
        . 例) onload, onclick 등
     - 이벤트 리스너 : `캡처링,타깃 단계(true)` 또는 `타깃,버블링 단계(false)`를
                       선택적으로 실행 가능
        . 例) addEventListener(type,callback,true/false)

  ㅇ 이벤트 위임 (delegation)
     - 하위 요소들 각각에 이벤트를 붙이지 않고,
     - 상위 요소 하나 만으로 하위 요소의 이벤트들을 제어하는 방식
     * 통상, 위의 버블링 단계를 응용하여 구현 함


[JS 이벤트] 1. JS 이벤트 2. JS 이벤트 종류 3. JS 이벤트 객체 4. JS 이벤트 처리기

 
        최근수정     요약목록     참고문헌