이벤트 처리기

(2019-12-19)

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

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

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. 커스템 이벤트

    요약목록
Copyrightⓒ written by 차재복 (Cha Jae Bok)        「 소액후원 」