이벤트 처리기

(2019-12-19)

Event Handler, 이벤트 핸들러, Event Listener, 이벤트 리스너, addEventListener

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, 콜백함수 [,타깃팅종류])


[JS 이벤트] 1. JS 이벤트 2. JS 이벤트 종류 3. JS 이벤트 객체 4. JS 이벤트 처리기 5. JS 이벤트 전파 6. 커스템 이벤트
  1.   기술공통
  2.   기초과학
  3.   진동/파동
  4.   방송/멀티미디어/정보이론
  5.   전기전자공학
  6.   통신/네트워킹
  7.   정보기술(IT)
        1. 정보기술
    1.   전산기초
    2.   컴퓨터구조
    3.   프로그래밍
          1. 프로그램, 프로그래밍
      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 이벤트 처리기
                  5. JS 이벤트 전파
                  6. 커스템 이벤트
            4.   Ajax
            5.   jQuery
        5.   PHP
        6.   파이썬
        7.   (기타 언어)
      9.   프로그래밍 기타일반
    4.   데이터베이스
    5.   소프트웨어 공학
    6.   운영체제
    7.   정보보호/보안
    8.   IT 기타기술
  8.   공학일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

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