[javascript] 9. event 사용 및 event 모델 정리

[javascript] 9. event 사용 및 event 모델 정리

* 목차 *

1. Event 란?

2. Event handler(이벤트 핸들러) or Event listener(이벤트 리스너)

3. Event 종류

4. Event 모델

5. Event 모델 별 사용법

1. Event 란?

  1) Event 정의

    - 특정 대상에 가하는 어떠한 행동 이라고 할수 있습니다.

      또한 행동의 주체는 누구든 상관이 없습니다. 사람이 할 수도 있고 프로그램이 할 수도 있습니다.

      C언어를 배우고 바로 Javascript로 넘어오신분들에게는 생소 할 수도 있습니다.

      왜냐하며 시스템 프로그램에서는 나오지 않는 개념 이기 때문입니다.

  2) Exmaple

    다음은 예제들 입니다.

    - 마우스의 왼쪽 버튼을 클릭한다.

    - 버튼을 눌렀다. 

- 페이지가 새로고침 되었다. 

- 마우스가 움직였다 .

- a key을 눌렀다.

2. Event handler(이벤트 핸들러) or Event listener(이벤트 리스너)

  - Event와 연관있는 Event handler를 알아 보겠습니다.

  1) Event handler 정의

    - Event(특정 대상에 가하는 어떠한 행동)에 대한 다음 처리과정을 Event handler라고합니다.

  예를 들면, "버튼을 눌렀다"라는 Event가 발생하면, "이름을 알아내서 환영 메시지를 뛰운다"

  여기서 "이름을 알아내서 환영 메시지를 뛰운다"라는 일련의 다음 과정을 정의해 놓은게 

        Event handler 입니다

    - Ex) 항아리를 깬다. 깰때는 망치로 깬다. 라고 할 때

          - 항아리                : 대상(객체)

          - 깬다                   : Event

          - 망치로 항아리를 깬다 : Event Hadler

 

3. Event 종류

  - HTML에서는 Event의 종류를 이미 정의해 놓았습니다. 

  - w3schools에서는 HTML의 DOM관련 Event가 완벽 하게 정리 되어 있습니다.

    https://www.w3schools.com/jsref/dom_obj_event.asp  

  

4. Event 모델

  1) 정의 

    - Event 모델이란, Event를 등록하는 다양항 방식을 구분하여 정의해 놓은 것 입니다 

      총 2가지 category로 나눠지고, 각 category별로 2가지의 Event 모델이 존재합니다.

  2) Event 모델 분류

No	모델 종류	handler  처리 개수	특이 사항	DOM Level
1	인라인 Event 모델	1		DOM Level 0
2	기본 Event 모델	1		DOM Level 0
3	마이크로소프트 인터넷 익스플로러 Event 모델	다수	ie 11 부터지원 안함	DOM Level 2
4	표준 Event 모델	다수		DOM Level 2

  3) Event 모델 설명

    (1) 인라인 Event 모델 

- HTML의 태그의 Event Property와 Event handler를 연결하는 방식입니다. 

- 단점 : 코드가 매우 지저분해 지며, 유지 보수가 힘듭니다.

    (2) 기본 Event 모델

      - 자바스크립트에서 문서 객체의 Event Property을 사용하여 Event와 Event handler를 연결하는 방식입니다

      - 단점 : 한개의 Event 핸들러 밖에 처리를 하지 못 합니다.

    (3) 마이크로소프트 인터넷 익스플로러 Event 모델

      - 인터넷 익스플로러에서 제공하는 "Event Handler 추가 함수"를 이용해서

  Event와 Event handler를 연결하는 방식입니다.

      - 정점 : 여러개의 Event 핸들러 처리 가능

      - 단점 : 인터넷 익스플로러에서만 사용 가능합니다

         이벤트 캡쳐링을 지원 하지 않습니다.

      * ie11 부터는 지원 하지 않습니다.        

    (4) 표준 Event 모델

      - 웹 표준을 만드는 단체인 W3C에서 공식적으로 지정한 DOM Level 2 이벤트 모델 입니다.

      - 정점 : 여러개의 Event 핸들러 처리 가능

5. Event 모델 별 사용법

1) 인라인 Event 모델

    (1) 동작 방식

      - HTML의 button tag에서 onclick Event Property에 Event Handler를 연결 하겠습니다.

      - 아래 코드에서 onClick이란 Event Property가 Event이고, 할당된 코드가 Event Handler 입니다.

<button onclick="var msg='hellow'; alert(msg);">

onClick Event button

</button>

   - 출력 결과

  2) 기본 Event 모델

    (1) 동작 방식

      - 자바스크립트에서 문서 객체의 Event Property을 사용하여 Event와 Event handler를 연결하는 방식입니다.

      - 아래 코드에서는 button 객체를 얻어 객체의 onclick Event Property에, Event Handler를 연결한 것입니다. 

    * 기본적으로 Event와 Event handler를 연결 하기 위해서 window.onload의 Event Handler 안에서

      코드를 작성해야 합니다. 그래야 페이지가 로드될 때 Event와 Event handler가 연결되 입니다.

<script>

window.onload = function() {

var button_obj = document.getElementById('buttion1');

button_obj.onclick = function () {

var msg = "hellow 기본 이벤트 모델";

alert(msg);

};

};

</script>

<button id='buttion1'>

onClick Event button , 기본 이벤트 모델

</button>

   - 출력 결과

  3) 마이크로소프트 인터넷 익스플로러 Event 모델

    (1) 동작 방식

      - 자바스크립트에서 문서 객체의 attachEvent을 사용하여 Event와 Event handler를

        연결하는 방식입니다.

    (2) 사용 방법

      A. 이벤트 추가

        - 객체.attachEvent('이벤트 Property', Event handler)

- userCapture는 사용하지 않을 경우 기본 값이 false 입니다.

      B. 이벤트 제거

- 객체.detachEvent('이벤트 Property', Event handler)

      * ie11 로 올라오면 서 attachEvent가 사라져서 addEventListener 를 사용 해야한다.

      * 구 시대 유물이므로 그냥 이게 있다라고 알아 두면 될것 같습니다.

  4) 표준 Event 모델

    (1) 동작 방식

      - 자바스크립트에서 문서 객체의 addEventListener 메소드을 사용하여 Event와 Event handler를

        연결하는 방식입니다.

     

    (2) 사용 방법

      A. 이벤트 추가

        - 객체.addEventListener('이벤트 이름', Event handler, useCapture)

- userCapture는 사용하지 않을 경우 기본 값이 false 입니다.

      B. 이벤트 제거

- 객체.removeEventListener('이벤트 이름', Event handler)

    * 기본적으로 Event와 Event handler를 연결 하기 위해서 window.onload의 Event Handler 안에서

      코드를 작성해야 합니다. 그래야 페이지가 로드될 때 Event와 Event handler가 연결되 입니다.

    - 아래 코드에서는 button 객체의 onclick Property에 , Event Handler를 연결한 것입니다.

<script>

window.onload = function() {

var button_obj = document.getElementById('buttion2');

var event_hadller = function(){

var msg = "hellow 표준 이벤트 모델";

alert(msg);

}

// click 이벤트추가

button_obj.addEventListener('click', event_hadller);

// click 이벤트 삭제

// button_obj.removeEventListener('click', event_hadller);

};

</script>

<button id='buttion2'>

onClick Event button , 표준 이벤트 모델

</button>

   - 출력 결과