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 이벤트 처리기
  1.   기술공통
  2.   기초과학
  3.   진동/파동
  4.   방송/멀티미디어/정보이론
  5.   전기전자공학
  6.   통신/네트워킹
  7.   정보기술(IT)
        1. 정보기술
    1.   전산기초
    2.   컴퓨터구조
    3.   프로그래밍
          1. 프로그램, 프로그래밍
          2. 프로그래밍 기법
      1.   프로그래밍 언어론
      2.   구조적 프로그래밍
      3.   객체지향 프로그래밍
      4.   자료표현코드
      5.   자료구조
      6.   알고리즘
      7.   시스템 소프트웨어
      8.   프로그래밍언어 종류
            1. 프로그래밍 언어
        1.   C
        2.   C++
        3.   자바(Java)
        4.   자바스크립트
              1. JavaScript
              2. JS 기초 문법
          1.   JS 변수,타입
          2.   JS 연산자
          3.   JS 함수
          4.   JS 객체
          5.   JS 배열/Map/Set
          6.   JS 활용
          7.   JS 웹문서 제어
                1. 웹문서 내 JS
                2. 동일 출처 정책
            1.   JS Window 객체
            2.   JS DOM 제어
            3.   JS 이벤트
              1.   1. JS 이벤트
                  2. JS 이벤트 종류
                  3. JS 이벤트 객체
                  4. JS 이벤트 처리기
            4.   Ajax
            5.   jQuery
        5.   PHP
        6.   파이썬
        7.   (기타 언어)
      9.   프로그래밍 기타일반
    4.   데이터베이스
    5.   소프트웨어 공학
    6.   운영체제
    7.   정보보호/보안
    8.   IT 기타기술
  8.   공업일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

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