JS Event

정현승·2024년 11월 7일

Event

브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것인데 이것은 DOM 요소와 관련이 있습니다. 이벤트가 발생하면 그에 맞는 반응을 하여야 합니다. 이를 위해 이벤트는 일반적으로 함수에 연결되며 그 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행됩니다.. 이 함수를 이벤트 핸들러라 하며 이벤트에 대응하는 처리를 기술합니다.

이벤트 타겟(Event Target)

이벤트가 발생한 DOM 요소를 이벤트 타겟이라 부릅니다.
예를 들어 버튼을 클릭했다면, 버튼 요소가 이벤트 타겟이 됩니다.
event.target을 통해 이벤트 타겟 요소에 접근하여 해당 요소의 속성이나 스타일을 변경할 수 있습니다.

이벤트 타입(Event Type)

발생한 이벤트의 종류를 나타내는 문자열입니다.
click, input, mouseover 등 다양한 타입이 있으며, 이벤트 타입을 기준으로 특정 이벤트가 발생할 때 동작할 코드를 작성할 수 있습니다.

이벤트 핸들러(Event Handler)

특정 이벤트가 발생했을 때 실행되는 함수로, 이벤트 리스너라고도 합니다.
이벤트가 발생하면 해당 핸들러가 호출되며, 핸들러에서 이벤트 객체를 활용해 필요한 동작을 처리합니다.

inline 방식

인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것입니다.

<input type="button" onclick="alert('Hello world');" value="button" />

프로퍼티 방식

프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다.
인라인 방식에 비해서 HTML과 JavaScript를 분리할 수 있다는 점에서 선호되는 방식이지만 addEventListener 방식을 더 사용합니다.
프로퍼티 방식은 이벤트에 오직 하나의 이벤트 핸들러만을 바인딩할 수 있습니다.

<button class="btn">Click me</button>
<script>
    const btn = document.querySelector('.btn');

    // 이벤트 핸들러 프로퍼티 방식은 이벤트에 하나의 이벤트 핸들러만을 바인딩할 수 있다
    // 첫번째 바인딩된 이벤트 핸들러 => 실행되지 않는다.
    btn.onclick = function() {
        alert('① Button clicked 1');
    };

    // 두번째 바인딩된 이벤트 핸들러
    btn.onclick = function() {
        alert('① Button clicked 2'); // << 실행결과 
    };
</script>

addEventListener 방식

addEventListener 메소드를 이용하여 대상 DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수(이벤트 핸들러)를 지정합니다.

하나의 이벤트에 대해 하나 이상의 이벤트 핸들러를 추가할 수 있습니다.
캡처링과 버블링을 지원합니다.
HTML 요소뿐만아니라 모든 DOM 요소(HTML, XML, SVG)에 대해 동작합니다. 브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM을 생성합니다.

<input type="button" id="target" value="button" />

<script>
    var t = document.getElementById('target');
    t.addEventListener('click', function(event){
        alert('Hello world, '+event.target.value);
    });
</script>

Event 객체

event 객체는 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 유용한 정보를 제공합니다.
이벤트가 발생하면 event 객체는 동적으로 생성되며 이벤트를 처리할 수 있는 이벤트 핸들러에 인자로 전달됩니다.

<!DOCTYPE html>
<html>
<body>
  <p>클릭하세요. 클릭한 곳의 좌표가 표시됩니다.</p>
  <em class="message"></em>
  
  <script>
  function showCoords(e) { // e: event object
    const msg = document.querySelector('.message');
    msg.innerHTML =
      'clientX value: ' + e.clientX + '<br>' +
      'clientY value: ' + e.clientY;
  }
  addEventListener('click', showCoords); // 참조하는게 없으면 기본 window 전역 객체
  </script>
</body>
</html>

Event 객체 속성 종류

Event.target

실제로 이벤트를 발생시킨 요소를 입니다. 버블링에 인해서 쌩뚱맞는 다른 타겟이 인식 될 수 있습니다.

Event.currentTarget

코드에서 이벤트에 바인딩된 DOM 요소입니다. 즉, addEventListener 앞에 기술된 객체입니다. 따라서 이벤트 핸들러 함수 내에서 currentTarget과 this는 언제나 일치합니다.
예를들어 아래 코드에서 div를 이벤트리스너로 등록했습니다. 그런데 div안에 button이 있는데, div영역을 click하든 button영역을 click하든 똑같이 이벤트가 발생하게됩니다.

<div>
    <button>배경색 변경</button>
</div>

document.querySelector('div').addEventListener('click', function() {

      // this: 이벤트에 바인딩된 DOM 요소(div 요소)
      console.log('this: ', this);
      
      // target: 실제로 이벤트를 발생시킨 요소(button 요소 또는 div 요소)
      console.log('e.target:', e.target);
      
      // currentTarget: 이벤트에 바인딩된 DOM 요소(div 요소)
      console.log('e.currentTarget: ', e.currentTarget);
});