40장 이벤트(2)

* 아래 내용은 이웅모 저자님의 모던 자바스크립트 Deep Dive 책(위키북스)을 정리한 내용입니다.

저작권에 문제가 된다면 삭제하도록 하겠습니다.

5. 이벤트 객체

이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성된다.

생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.

<p>클릭하세요. 클릭한 곳의 좌표가 표시됩니다.</p>
  <em class="message"></em>
  <script>
    const $msg = document.querySelector('.message');

    // 클릭 이벤트에 의해 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.
    function showCoords(e) {
      $msg.textContent = `clientX: ${e.clientX}, clientY: ${e.clientY}`;
    }

    document.onclick = showCoords;
  </script>

이벤트 핸들러 어트리뷰트 방식으로 이벤트 핸들러를 등록했어도 event를 통해 이벤트 객체를 전달받을 수 있는데,

이 경우는 이벤트 핸들러의 첫 번째 매개변수 이름이 반드시 event 여야 한다.

<body onclick="showCoords(event)">

위의 코드에서 onclick에 전달되는 함수는 아래와 같다.

function onclick(event) {
  showCoords(event);
}

5.1 이벤트 객체의 상속 구조

이벤트 객체는 위와 같은 상속 구조를 갖는다.

이벤트가 발생하면 암묵적으로 생성되는 이벤트 객체는 위와같은 생성자 함수에 의해 생성된다.

그리고 생성된 이벤트 객체는 생성자 함수와 더불어 생성되는 프로토타입으로 구성된 프로토타입 체인의 일원이 된다.

Event 인터페이스는 DOM 내에서 발생한 이벤트에 의해 생성되는 이벤트 객체를 나타낸다. Event 인터페이스에는 모든 이벤트 객체의 공통 프로퍼티가 정의되어 있고 FocusEvent, MouseEvent, KeyboardEvent, Wheel Event 같은 하위 인터페이스에는 이벤트 타입에 따라 고유한 프로퍼티가 정의되어 있다. 즉, 이벤트 객체의 프로퍼티는 발생한 이벤트의 타입에 따라 달라진다.

5.2 이벤트 객체의 공통 프로퍼티

Event 인터페이스의 이벤트 관련 프로퍼티는 모든 이벤트 객체가 상속받는 공통 프로퍼티다.

공통 프로퍼티	설명	타입
type	이벤트 타입	string
target	이벤트를 발생시킨 DOM 요소	DOM 요소 노드
currentTarget	이벤트 핸들러가 바인딩된 DOM 요소	DOM 요소 노드
eventPhase	이벤트 전파단계	number
bubbles	이벤트를 버블링으로 전파하는지 여부	boolean
cancelable	preventDefault 메서드를 호출하여 이벤트의 기본동작을 취소할 수 있는지 여부	boolean
defaultPrevented	preventDefault 메서드를 호출하여 이벤트를 취소했는지 여부	boolean
isTrusted	사용자의 행위에 의해 발생한 이벤트인지 여부	boolean
timeStamp	이벤트가 발생한 시각	number

5.3 마우스 정보 취득

MouseEvent 타입의 이벤트 객체는 다음과 같은 고유의 프로퍼티를 갖는다.

마우스 포인터 좌표 정보를 나타내는 프로퍼티 : screenX / screenY, clientX / clientY , pageX / pageY, offsetX / offsetY

버튼 정보를 나타내는 프로퍼티 : altKey, ctrlKey, shiftKey, button (마우스를 누를때 함께 누른 키보드 버튼)

5.4 키보드 정보 취득

KeyboardEvent 타입의 이벤트 객체는 altKey, ctrlKey, shiftKey, metaKey, key, keyCode 같은 고유의 프로퍼티를 갖는다.

6. 이벤트 전파

DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 이를 이벤트 전파라고 한다.

<!DOCTYPE html>
<html>
<body>
  <ul id="fruits">
    <li id="apple">Apple</li>
    <li id="banana">Banana</li>
    <li id="orange">Orange</li>
  </ul>
  <script>
    const $fruits = document.getElementById('fruits');
    const $banana = document.getElementById('banana');

    // #fruits 요소의 하위 요소인 li 요소를 클릭한 경우
    // 캡처링 단계의 이벤트를 캐치한다.
    $fruits.addEventListener('click', e => {
      console.log(`이벤트 단계: ${e.eventPhase}`); // 1: 캡처링 단계
      console.log(`이벤트 타깃: ${e.target}`); // [object HTMLLIElement]
      console.log(`커런트 타깃: ${e.currentTarget}`); // [object HTMLUListElement]
    }, true);

    // 타깃 단계의 이벤트를 캐치한다.
    $banana.addEventListener('click', e => {
      console.log(`이벤트 단계: ${e.eventPhase}`); // 2: 타깃 단계
      console.log(`이벤트 타깃: ${e.target}`); // [object HTMLLIElement]
      console.log(`커런트 타깃: ${e.currentTarget}`); // [object HTMLLIElement]
    });

    // 버블링 단계의 이벤트를 캐치한다.
    $fruits.addEventListener('click', e => {
      console.log(`이벤트 단계: ${e.eventPhase}`); // 3: 버블링 단계
      console.log(`이벤트 타깃: ${e.target}`); // [object HTMLLIElement]
      console.log(`커런트 타깃: ${e.currentTarget}`); // [object HTMLUListElement]
    });
  </script>
</body>
</html>

위의 예제 코드에서 li 요소를 클릭하면 클릭 이벤트가 발생하여 이벤트 객체를 생성하고 클릭된 li요소가 이벤트 타깃이 된다.

이 때 클릭 이벤트 객체는 window에서 시작해서 이벤트 타깃 방향으로 전파된다. 이것이 캡처링 단계다.

이후 이벤트 객체는 이벤트를 발생시킨 이벤트 타깃에 도달한다. 이것이 타깃 단계다.

이후 이벤트 객체는 이벤트 타깃에서 시작해서 window방향으로 전파된다. 이것이 버블링 단계다.

이벤트 핸들러 어트리뷰트/ 프로퍼티 방식으로 등록한 이벤트 핸들러는 타깃 단계와 버블링 단계의 이벤트만 캐치할 수 있다.

addEventListener 메서드방식으로 등록한 이벤트 핸들러는 캡쳐링, 타깃, 버블링 단계 모두에서 이벤트를 캐치할 수 있다.

7. 이벤트 위임

이벤트 위임(event delegation)은 여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM요소에 이벤트 핸들러를 등록하는 방법을 말한다.

위에서 본 것 같이 이벤트는 이벤트 타깃은 물론 상위 DOM 요소에서도 캐치할 수 있다. 이벤트 위임을 통해 상위 DOM 요소에 이벤트 핸들러를 등록하면 여러 개의 하위 DOM 요소에 이벤트 핸들러를 등록할 필요가 없다.

<!DOCTYPE html>
<html>
<head>
  <style>
    #fruits {
      display: flex;
      list-style-type: none;
      padding: 0;
    }

    #fruits li {
      width: 100px;
      cursor: pointer;
    }

    #fruits .active {
      color: red;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <nav>
    <ul id="fruits">
      <li id="apple" class="active">Apple</li>
      <li id="banana">Banana</li>
      <li id="orange">Orange</li>
    </ul>
  </nav>
  <div>선택된 내비게이션 아이템: <em class="msg">apple</em></div>
  <script>
    const $fruits = document.getElementById('fruits');
    const $msg = document.querySelector('.msg');

    // 사용자 클릭에 의해 선택된 내비게이션 아이템(li 요소)에 active 클래스를 추가하고
    // 그 외의 모든 내비게이션 아이템의 active 클래스를 제거한다.
    function activate({ target }) {
      // 이벤트를 발생시킨 요소(target)가 ul#fruits의 자식 요소가 아니라면 무시한다.
      if (!target.matches('#fruits > li')) return;

      [...$fruits.children].forEach($fruit => {
        $fruit.classList.toggle('active', $fruit === target);
        $msg.textContent = target.id;
      });
    }

    // 이벤트 위임: 상위 요소(ul#fruits)는 하위 요소의 이벤트를 캐치할 수 있다.
    $fruits.onclick = activate;
  </script>
</body>
</html>

이벤트 위임을 통해 하위 DOM 요소에서 발생한 이벤트를 처리할 때 주의할 점은 상위 요소에 이벤트 핸들러를 등록하기 때문에 이벤트를 실제로 발생시킨 DOM 요소가 개발자가 기대한 DOM 요소가 아닐수도 있다는 것이다.

Element.prototype.matches 메서드는 인수로 전달된 선택자에 의해 특정 노드를 탐색 가능한지 확인한다.

위의 코드처럼 matches 메서드를 사용하여 (개발자가 의도한)이벤트를 발생시킨 요소가 li 요소인지 확인 해줘야 한다.

Reference

- 이웅모 , 모던 자바스크립트 Deep Dive , 위키북스 , 2020

'개인공부 > 모던 자바스크립트 Deep Dive' 카테고리의 다른 글

48장 모듈 (0)	2023.02.01
40장 이벤트(3) (0)	2023.02.01
40장 이벤트(1) (0)	2023.01.31
39장 DOM(4) (0)	2023.01.29
39장 DOM(3) (0)	2023.01.29

공부기록

40장 이벤트(2)

5. 이벤트 객체

5.1 이벤트 객체의 상속 구조

5.2 이벤트 객체의 공통 프로퍼티

5.3 마우스 정보 취득

5.4 키보드 정보 취득

6. 이벤트 전파

7. 이벤트 위임

'개인공부 > 모던 자바스크립트 Deep Dive' 카테고리의 다른 글

댓글

티스토리툴바

40장 이벤트(2)

5. 이벤트 객체

5.1 이벤트 객체의 상속 구조

5.2 이벤트 객체의 공통 프로퍼티

5.3 마우스 정보 취득

5.4 키보드 정보 취득

6. 이벤트 전파

7. 이벤트 위임

'개인공부 > 모던 자바스크립트 Deep Dive' 카테고리의 다른 글

관련글

댓글

티스토리툴바