자바스크립트 이벤트

(2017-06-10)

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

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

  ㅇ 이벤트 리스너를 객체메소드와 연결시키는 방식
     - HTML 태그 요소에 해당하는 이벤트 핸들러를 객체메소드와 연결시켜,
        . 후에 이벤트가 발생했을 때에 객체메소드를 실행시키게 하는 방법
     - EventTarget.addEventListener()를 이용하는 방법


[JS 이벤트] 1. JS 이벤트 2. JS 이벤트 종류
  1.   기술공통
  2.   기초과학
  3.   파동/광학/음향
  4.   방송/멀티미디어/정보이론
  5.   전자/전기/제어
  6.   통신/네트워킹
  7.   정보기술(IT)
        1. 정보기술
    1.   전산기초
    2.   컴퓨터구조
    3.   프로그래밍
      1.   프로그래밍 언어론
      2.   객체지향
      3.   자료구조
      4.   알고리즘
      5.   자료표현(알파벳/코드)
      6.   시스템 프로그래밍
      7.   프로그래밍언어 종류
            1. 프로그래밍 언어
            2. 기계어,어셈블리언어
        1.   C/C++
        2.   자바(Java)
        3.   자바스크립트
              1. JavaScript
              2. JS 객체
              3. JS 변수,타입
              4. JS 함수
              5. JS 배열
              6. JS 연산자
          1.   JS 이벤트
            1.   1. JS 이벤트
                2. JS 이벤트 종류
          2.   JS 활용
          3.   jQuery
        4.   PHP
        5.   (기타 언어)
      8.   프로그래밍 기타일반
    4.   데이터베이스
    5.   소프트웨어 공학
    6.   운영체제
    7.   정보보호/보안
    8.   IT 기타기술
  8.   기계/재료/공업일반
  9.   표준/계측/품질
  10.   기술경영

 
        최근수정     참고문헌