티스토리 뷰

Frontend/JavaScript

[생활코딩][웹브라우저JS] - Event(이벤트)

blueprint-12 2022. 2. 12. 20:32

이벤트란?

이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭 했을 '때', 스크롤을 했을 '때', 

필드의 내용을 바꾸었을 '때'와 같은 것을 의미

 

이벤트 관련 용어

▶event target

target은 이벤트가 일어날 객체를 의미한다.

▶event type

  • 이벤트의 종류를 의미한다. 아래 예시 코드의 경우 click 이벤트 타입이다. 
  • 어떤 "때"에 해당하는 것
  • 태그마다 사용할 수 있는 타입이 다르다 

▶event handler 

  • 이벤트가 발생했을 때 동작하는(실행될) 코드를 의미 
  • 아래 예시 코드에서는 alert(window.location) 이 이벤트 핸들러에 해당한다.
 <body>
    <input
      type="button"
      onclick="alert(window.location)"
      value="alert(window.location)"
    />
  </body>
  
 //event target: button 태그에 대한 객체
 //event type: click 이벤트 타입
 //event handler: alert(window.location)
 //onclick="" 클릭 시 내부에 써있는 JS코드 alert(window.location) 를 브라우저가 실행해준다.

-> 이 코드의 경우 이벤트 등록을 인라인 형식으로 해놨다. 

이벤트 등록방법

이벤트 프로그래밍을 하기 위해서는 이벤트의 대상에 이벤트 핸들러를 등록해줘야 합니다. 

웹브라우저에서는 크게 3가지 종류의 등록방법을 제공한다.

 

1. 인라인(inline) 방식 - 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것

  • 인라인 방식은 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리함 (장점)
  • 정보인 HTML과 제어인 JavaScript가 혼재된 형태이기 때문에 바람직한 방법은 아님 (단점) -> 정보와 제어가 분리 필요
  • 이벤트가 발생한 대상을 필요로 하는 경우 this를 통해서 참조 가능.
<!--자기 자신을 참조하는 불편한 방법-->
    <input
      id="target"
      type="button"
      onclick="alert(`Hell world, ` + document.getElementById('target').value);"
      value="button"
    />
    <!--this 를 통해서 간편하게 참조하는 방법-->
    <input
      type="button"
      onclick="alert(`Hello world `+ this.value);"
      value="button"
    />

 

2. 프로퍼티 리스너 방식 - 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다.

  • 인라인 방식에 비해서 HTML과 JavaScript를 분리할 수 있다는 점에서 선호되는 방식이지만 뒤에서 배울 addEventListener 방식을 추천한다.
  • 프로퍼티 리스너 방식을 사용하면 단 하나의 이벤트 핸들러를 설치할 수 있다.  이미 존재하는 리스너 다음에 또 다른 리스너를 추가하게 되면 기존의 리스너는 사라지게 된다(덮어쓰기).
  • 이벤트 객체 : 이벤트가 실행된 맥락의 정보가 필요할 때는 이벤트 객체를 사용한다. 이벤트 객체는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다. // IE8 버전 이하의 경우 크로스 브라우징 이슈가 있습니다.
 	<body>
    <!--프로퍼티 리스너 방식 -->
    <!--인자로의 이벤트 객체 -->
    <input type="button" id="프로퍼티리스너" value="프로퍼티리스너" />
    <script>
      const 프로퍼티 = document.getElementById("프로퍼티리스너");
      프로퍼티.onclick = function (event) {
        alert("Hello world " + event.target.value);
      };
    </script>
    </body>

+ ie8 이하 버전에서는 이벤트 객체를 핸들러의 인자가 아니라 전역객체의 event 프로퍼티로 제공

또한, target 프로퍼티도 지원하지 x 

  • event -> window.event(IE8 이하 버전 해당)
  • event.target -> event.srcElement(IE8 이하 버전 해당)

3. addEventListener 방식 

  • 이벤트를 등록하는 가장 권고되는 방식이다. 
  • 하나의 이벤트 대상에 복수의 동일 이벤트 타입 리스너를 등록할 수 있다. (장점) -> 프로퍼티 리스너 방식과 다르게 덮어쓰는 것이 아니라 말 그대로 add + eventListener 이벤트 리스너를 추가할 수 있고 순차적으로 실행된다. 

▶하나의 이벤트 타겟에 여러개의 이벤트 리스너를 설치하는 예시

<body>
    <input type="button" id="target" value="button" />
    <script>
      const t = document.getElementById("target");
      t.addEventListener("click", function () {
        alert(1);
      });
      t.addEventListener("click", function () {
        alert(2);
      });
      //output: 한번 클릭을 하면 1 출력후 2도 출력된다.
      //프로퍼티 리스너 방식을 이용해서 작성하면 1은 출력되지 않고 2만 출력된다. 
    </script>
  </body>

▶여러개의 이벤트 타겟에 하나의 이벤트 리스너 설치하는 예시

  • 이벤트 객체(event)를 이용하면 복수의 엘리먼트에 하나의 리스너를 등록해서 재사용할 수 있다. ->이벤트가 발생했을 때, 그 이벤트가 어느 이벤트 타겟에서 발생했는 지 알아낼 수 있어야한다. 그 때 사용하는 것이 이벤트 객체이다. // 예시에서는 event.target.id
<body>
<input type="button" id="target1" value="button1" />
<input type="button" id="target2" value="button2" />
<script>
//이벤트 객체를 이용하면 복수의 엘리먼트에 하나의 리스너를 등록해서 재사용가능
      const t1 = document.getElementById("target1");
      const t2 = document.getElementById("target2");

	//해당 event가 발생한 타겟의 아이디가 "target1"이라면 alert 1
    //"target2"라면 alert 2 실행
      function btn_listener(event) {
        switch (event.target.id) {
          case "target1":
            alert(1);
            break;
          case "target2":
            alert(2);
            break;
        }
      }
      //여러 타겟에 같은 이벤트 리스너를 재활용
      t1.addEventListener("click", btn_listener);
      t2.addEventListener("click", btn_listener);
      </script>
</body>

'Frontend > JavaScript' 카테고리의 다른 글

[생활코딩][웹브라우저JS] - 이벤트 기본동작 취소  (0) 2022.02.15
[생활코딩][웹브라우저JS] - 이벤트 전파(버블링과 캡처링, 이벤트 위임)  (0) 2022.02.14
[생활코딩][웹브라우저JS] - 문서의 기하학적 특성  (0) 2022.02.12
[생활코딩][웹브라우저JS] - Document 객체, Text 객체  (0) 2022.02.09
[생활코딩][웹브라우저JS]- 문자열로 노드 제어  (0) 2022.02.09
댓글