본문 바로가기
이것저것 스터디📚/JavaScript - Deep Dive

DeepDive - 40장. 이벤트

pocoding 2023. 9. 12. 14:14

40.1 이벤트 드리븐 프로그래밍

- 이벤트 핸들러 : 이벤트가 발생했을 때 호출될 함수

- 이벤트 핸들러 등록 : 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것

- 이벤트 드리븐 프로그래밍 : 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식

40.2 이벤트 타입

- 이벤트 타입 : 이벤트의 종류를 나타내는 문자열(mdn : https://developer.mozilla.org/ko/docs/Web/API/Event)

40.3 이벤트 핸들러 등록

40.3.1 이벤트 핸들러 어트리뷰트 방식

<!DOCTYPE html>
<html>
<body>
  <button onclick="sayHi('Lee')">Click me!</button>
  <script>
    function sayHi(name) {
      console.log(`Hi! ${name}.`);
    }
  </script>
</body>
</html>

- HTML 요소의 어트리뷰트 중에는 이벤트에 대응하는 이벤트 핸들러 어트리뷰트가 있다.

- on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있다.(ex. onclick)

- 이벤트 핸들러 어트리뷰트 값으로 함수 호출문 등의 문을 할당하면 이벤트 핸들러가 등록된다.

- 이때 함수 참조가 아닌 함수 호출문 등의 문을 할당하는 것에 주의하자.

 

- 이벤트 핸들러 프로퍼티 방식에서는 DOM 노드의 이벤트 핸들러 프로퍼티에 함수 참조를 할당한다.

- 이벤트 핸들러 어트리뷰트 방식에서는 이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미한다.

- 이는 이벤트 핸들러에 인수를 전달하기 위함이다.

- 이벤트 핸들러 어트리뷰트 값으로 함수 참조를 할당한다면 이벤트 핸들러에 인수를 전달하기가 곤란하다.

 

- 이벤트 핸들러 어트리뷰트 값으로 여러 개의 문을 할당할 수도 있다.

<button onclick="console.log('Hi! '); console.log('Lee');">Click me!</button>

- 이벤트 핸들러 어트리뷰트 방식은 HTML과 자바스크립트의 관심사가 다르므로 혼재하는 것보다 분리하는 것이 좋기 때문에 권장되지 않는 방식이다.

- 하지만, CBD(Compnent Based Development)방식에서는 이벤트 핸들러 어트리뷰트 방식으로 이벤트를 처리한다.

40.3.2 이벤트 핸들러 프로퍼티 방식

- 이벤트 핸들러 프로퍼티 방식은 이벤트 핸들러 프로퍼티에 함수를 바인딩하는 것이다.

<!DOCTYPE html>
<html>
<body>
  <button>Click me!</button>
  <script>
    const $button = document.querySelector('button');

    // 이벤트 핸들러 프로퍼티에 이벤트 핸들러를 바인딩
    $button.onclick = function () {
      console.log('button click');
    };
  </script>
</body>
</html>

- 이벤트 타깃 : 이벤트를 발생시킬 타겟

- 이벤트 타입 : 이벤트의 종류를 나타내는 문자열

 

- 이벤트 핸들러 프로퍼티 방식은 이벤트 타깃, 이벤트 타입, 이벤트 핸드러를 지정해야 한다.

- 이벤트 핸들러 프로퍼티 방식은 HTML과 자바스크립트가 뒤섞이는 문제를 해결할 수는 있지만, 하나의 이벤트 핸들러만 바인딩 할 수 있다는 단점도 있다.

40.3.3 addEventListener 메서드 방식

- 첫 번째 매개변수에는 이벤트의 종류를 나타내는 문자열인 이벤트 타입 전달(on 접두사는 제외)

- 두 번째 매개변수에는 이벤트 핸들러를 전달

- 세 번째 매개변수에는 이벤트를 캐치할 이벤트 전파 단계(캡쳐링 또는 버블링)를 지정

- 이벤트 핸들러 프로퍼티 방식은 이벤트 핸들러 프로퍼티에 이벤트를 바인딩하지만, addEventListener 메서드에는 이벤트 핸들러를 인수로 전달한다.

<!DOCTYPE html>
<html>
<body>
  <button>Click me!</button>
  <script>
    const $button = document.querySelector('button');

    // 이벤트 핸들러 프로퍼티 방식
    // $button.onclick = function () {
    //   console.log('button click');
    // };

    // addEventListener 메서드 방식
    $button.addEventListener('click', function () {
      console.log('button click');
    });
  </script>
</body>
</html>

- 동일한 HTML 요소에 발생한 동일한 이벤트에 대해 이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식을 모두 사용하여 이벤트를 등록하면 2개의 이벤트 핸들러가 모두 호출된다.

- addEventListener 메서드는 하나 이상의 이벤트 핸들러를 등록할 수 있으며, 이벤트 핸들러는 등록된 순서대로 호출된다.

 <!DOCTYPE html>
<html>
<body>
  <button>Click me!</button>
  <script>
    const $button = document.querySelector('button');

    // addEventListener 메서드는 동일한 요소에서 발생한 동일한 이벤트에 대해
    // 하나 이상의 이벤트 핸들러를 등록할 수 있다.
    $button.addEventListener('click', function () {
      console.log('[1]button click');
    });

    $button.addEventListener('click', function () {
      console.log('[2]button click');
    });
  </script>
</body>
</html>

- 단, 참조가 동일한 이벤트 핸들러를 중복 등록하면 하나의 이벤트 핸들러만 등록된다.

<!DOCTYPE html>
<html>
<body>
  <button>Click me!</button>
  <script>
    const $button = document.querySelector('button');

    const handleClick = () => console.log('button click');

    // 참조가 동일한 이벤트 핸들러를 중복 등록하면 하나의 핸들러만 등록된다.
    $button.addEventListener('click', handleClick);
    $button.addEventListener('click', handleClick);
  </script>
</body>
</html>

40.4 이벤트 핸들러 제거

- EventTarget.prototype.removeEventListener 메서드를 사용하면, addEventListener로 등록한 이벤트 핸들러를 제거할 수 있다.

- 이때, removeEventListener 메서드에 전달한 인수는 addEventListener 메서드에 전달한 인수와 일치해야 한다.

- 즉, 무명함수를 이벤트 핸들러로 등록한 경우에는 제거할 수 없다.

- 이벤트 핸들러 프로퍼티 방식으로 등록한 이벤트 핸들러는 removeEventListener 메서드가 아닌, 이벤트 핸들러 프로퍼티에 null을 할당해서 제거한다.

40.5 이벤트 객체

- 이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성되고 이벤트 핸들러의 첫 번째 인수로 전달된다.

- 이벤트 핸들러 어트리뷰트 방식의 경우, 이벤트 객체를 전달받으려면 이벤트 핸들러의 첫 번째 매개변수 이름이 반드시 event이어야 한다.

40.5.1 이벤트 객체의 상속 구조

- 이벤트가 발생하면 이벤트 타입에 따라 다양한 이벤트 객체가 생성되는데, 이벤트 객체는 다음과 같은 상속 구조를 갖는다.

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

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

- target : 이벤트를 발생시킨 DOM 요소

- currentTarget : 이벤트 핸들러가 바인딩된 DOM 요소

40.6 이벤트 전파

- 이벤트 전파 : DOM 트리 상에 존재하는 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');

    // #fruits 요소의 하위 요소인 li 요소를 클릭한 경우
    $fruits.addEventListener('click', e => {
      console.log(`이벤트 단계: ${e.eventPhase}`); // 3: 버블링 단계
      console.log(`이벤트 타깃: ${e.target}`); // [object HTMLLIElement]
      console.log(`커런트 타깃: ${e.currentTarget}`); // [object HTMLUListElement]
    });
  </script>
</body>
</html>

- 위 예제는 ul 태그에 이벤트 핸들러를 바인딩했다. 이때 ul 태그의 하위 요소인 li 요소를 클릭하여 이벤트를 발생시키면, 이벤트 타깃(event target)은 li 요소이고 커런트 타깃(currentTarget)은 ul 요소이다.

- li 요소를 클릭하면 클릭 이벤트가 발생하여 클릭 이벤트 객체 생성 및 클릭된 li 요소가 이벤트 타깃이 된다.

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

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

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

 

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

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

- 대신 캡쳐링 단계의 이벤트를 캐치하려면 addEventListener 메서드의 3번째 인수로 true를 전달해야 한다.(기본값은 false 이다.)

 

* 이벤트 버블링이 발생하지 않는 이벤트

- 포커스 이벤트 : focus/blur

- 리소스 이벤트 : load/unload/abort/error

- 마우스 이벤트 : mouseenter/mouseleave

- 위 이벤트를 이벤트 타깃의 상위 요소에서 캐치하려면 캡쳐링 단계에서 캐치해야한다.

- 이때 대체 사용이 가능한 이벤트는 focusin/focusout, mouseover/mouseout 이다. 이 이벤트들은 버블링을 통해 전파된다.

40.7 이벤트 위임

- 이벤트 위임 : 여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법

- 이벤트 위임 방법을 사용하면, 상위 DOM 요소에 이벤트 핸들러를 등록하면, 여러 개의 하위 DOM 요소에 이벤트 핸들러를 등록할 필요가 없으며, 동적으로 하위 DOM 요소를 추가하더라도 일일이 추가된 DOM 요소에 이벤트 핸들러를 등록할 필요가 없다.

- 이벤트 위임 방법을 사용하면, 이벤트 객체의 currentTarget 프로퍼티는 언제나 변함없이 이벤트를 등록한 요소이지만, 이벤트 객체의 target 프로퍼티는 실제로 이벤트를 발생시킨 DOM 요소를 가리킨다.

40.8 DOM 요소의 기본 동작 조작

40.8.1 DOM 요소의 기본 동작 중단

- DOM 요소는 저마다 기본 동작이 있는데, 이벤트 객체의 preventDefault 메서드는 이러한 DOM 요소의 기본 동작을 중단시킨다.

40.8.2 이벤트 전파 방지

- 이벤트 객체의 stopPropagation 메서드는 이벤트 전파를 중단시킨다.

<!DOCTYPE html>
<html>
<body>
  <div class="container">
    <button class="btn1">Button 1</button>
    <button class="btn2">Button 2</button>
    <button class="btn3">Button 3</button>
  </div>
  <script>
    // 이벤트 위임. 클릭된 하위 버튼 요소의 color를 변경한다.
    document.querySelector('.container').onclick = ({ target }) => {
      if (!target.matches('.container > button')) return;
      target.style.color = 'red';
    };

    // .btn2 요소는 이벤트를 전파하지 않으므로 상위 요소에서 이벤트를 캐치할 수 없다.
    document.querySelector('.btn2').onclick = e => {
      e.stopPropagation(); // 이벤트 전파 중단
      e.target.style.color = 'blue';
    };
  </script>
</body>
</html>

- 위 예제에서는 하위 요소인 btn2에서 발생한 이벤트가 상위요소인 container에게 전파되는 것을 중단하여 자신에게 바인딩된 이벤트 핸들러만 실행되도록 한다.

40.9 이벤트 핸들러 내부의 this

40.9.1 이벤트 핸들러 어트리뷰트 방식

- 이벤트 핸들러 어트리뷰트 방식에서의 함수는 일반 함수로 호출되고, 일반 함수에서의 this는 전역 객체를 가리킨다.

-  단, 이벤트 핸들러를 호출할 때 인수로 전달한 this는 이벤트를 바인딩한 DOM 요소를 가리킨다.

<!DOCTYPE html>
<html>
<body>
  <button onclick="handleClick(this)">Click me</button>
  <script>
    function handleClick(button) {
      console.log(button); // 이벤트를 바인딩한 button 요소
      console.log(this);   // window
    }
  </script>
</body>
</html>

40.9.2 이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식

- 이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식 모두 이벤트 핸들러 내부의 this는 이벤트를 바인딩한 DOM 요소를 가리킨다.(즉, 이벤트 객체의 currentTarget 프로퍼티와 같다)

- 대신, 화살표 함수로 정의하는 경우 이벤트 핸들러 내부의 this는 상위 스코프의 this를 가리킨다.

 

* 클래스에서 이벤트 핸들러를 바인딩 하는 경우

- 클래스 메서드의 내부의 this는 원래 생성할 인스턴스를 가리키지만, 이벤트 핸들러 내부의 this는 이벤트를 바인딩한 DOM 요소를 가리키기 때문에 내부의 this는 이벤트를 바인딩한 DOM 요소가 된다.

- 이때 메서드를 이벤트 핸들러로 바인딩할 때 bind 메서드를 사용해서 this를 전달해서 메서드 내부의 this가 클래스가 생성할 인스턴스를 가리키도록 해야 한다.

- 또는 클래스 필드에 할당한 화살표 함수를 이벤트 핸들러로 등록하여 이벤트 핸들러 내부의 this가 인스턴스를 가리키도록 할 수도 있다.

<!DOCTYPE html>
<html>
<body>
  <button class="btn">0</button>
  <script>
    class App {
      constructor() {
        this.$button = document.querySelector('.btn');
        this.count = 0;

        // increase 메서드를 이벤트 핸들러로 등록
        this.$button.onclick = this.increase;
      }

      increase() {
        // 이벤트 핸들러 increase 내부의 this는 DOM 요소(this.$button)를 가리킨다.
        // 따라서 this.$button은 this.$button.$button과 같다.
        this.$button.textContent = ++this.count;
        // -> TypeError: Cannot set property 'textContent' of undefined
      }
    }

    new App();
  </script>
</body>
</html>

<!-- increase 메서드 내부의 this가 class가 생성할 인스턴스를 가리킨다 -->
<!DOCTYPE html>
<html>
<body>
  <button class="btn">0</button>
  <script>
    class App {
      constructor() {
        this.$button = document.querySelector('.btn');
        this.count = 0;

        // increase 메서드를 이벤트 핸들러로 등록
        // this.$button.onclick = this.increase;

        // increase 메서드 내부의 this가 인스턴스를 가리키도록 한다.
        this.$button.onclick = this.increase.bind(this);
      }

      increase() {
        this.$button.textContent = ++this.count;
      }
    }

    new App();
  </script>
</body>
</html>

40.10 이벤트 핸들러에 인수 전달

- 이벤트 핸들러 어트리뷰트 방식은 함수 호출문을 사용할 수 있기 때문에 함수 호출문을 사용할 수 있기 때문에 인수를 전달할 수 있지만, 이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식에서는 다음 방식을 사용해야 인수를 전달할 수 있다.


* 이벤트 핸들러 내부에서 함수를 호출하면서 인수를 전달하는 방법

<!DOCTYPE html>
<html>
<body>
  <label>User name <input type='text'></label>
  <em class="message"></em>
  <script>
    const MIN_USER_NAME_LENGTH = 5; // 이름 최소 길이
    const $input = document.querySelector('input[type=text]');
    const $msg = document.querySelector('.message');

    const checkUserNameLength = min => {
      $msg.textContent
        = $input.value.length < min ? `이름은 ${min}자 이상 입력해 주세요` : '';
    };

    // 이벤트 핸들러 내부에서 함수를 호출하면서 인수를 전달한다.
    $input.onblur = () => {
      checkUserNameLength(MIN_USER_NAME_LENGTH);
    };
  </script>
</body>
</html>

* 이벤트 핸들러를 반환하는 함수를 호출하면서 인수를 전달하는 방법

<!DOCTYPE html>
<html>
<body>
  <label>User name <input type='text'></label>
  <em class="message"></em>
  <script>
    const MIN_USER_NAME_LENGTH = 5; // 이름 최소 길이
    const $input = document.querySelector('input[type=text]');
    const $msg = document.querySelector('.message');

    // 이벤트 핸들러를 반환하는 함수
    const checkUserNameLength = min => e => {
      $msg.textContent
        = $input.value.length < min ? `이름은 ${min}자 이상 입력해 주세요` : '';
    };

    // 이벤트 핸들러를 반환하는 함수를 호출하면서 인수를 전달한다.
    $input.onblur = checkUserNameLength(MIN_USER_NAME_LENGTH);
  </script>
</body>
</html>

40.11 커스텀 이벤트

40.11.1 커스텀 이벤트 생성

- Event, UIEvent, MouseEvent 같은 이벤트 생성자 함수를 호출하여 명시적으로 생성한 이벤트 객체는 임의의 이벤트 타입을 지정할 수 있으며, 이러한 이벤트를 커스텀 이벤트라고 한다.

 

- 이벤트 생성자 함수는 첫 번째 인수로 이벤트 타입을 나타내는 문자열을 전달 받으며, 기존 이벤트 타입을 사용할 수도 있고, 기존 이벤트 타입이 아닌 임의의 문자열을 사용할 수도 있다.

// KeyboardEvent 생성자 함수로 keyup 이벤트 타입의 커스텀 이벤트 객체를 생성
const keyboardEvent = new KeyboardEvent('keyup');
console.log(keyboardEvent.type); // keyup

// CustomEvent 생성자 함수로 foo 이벤트 타입의 커스텀 이벤트 객체를 생성
const customEvent = new CustomEvent('foo');
console.log(customEvent.type); // foo

- 생성된 커스텀 이벤트 객체는 버블링되지 않으며 preventDefault 메서드로 취소할 수도 없다.

- 커스텀 이벤트 객체는 bubbles와 cancelabe 프로퍼티의 값이 false이지만, 이벤트 생성자 함수의 두 번째 인수로 bubbles 또는 cancelable 프로퍼티를 갖는 객체를 전달하면 true로 설정할 수도 있다.(그 외의 이벤트 고유의 프로퍼티 값을 지정할 수도 있음)

// MouseEvent 생성자 함수로 click 이벤트 타입의 커스텀 이벤트 객체를 생성
const mouseEvent = new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
  clientX: 50,
  clientY: 100
});

console.log(mouseEvent.clientX); // 50
console.log(mouseEvent.clientY); // 100

// KeyboardEvent 생성자 함수로 keyup 이벤트 타입의 커스텀 이벤트 객체를 생성
const keyboardEvent = new KeyboardEvent('keyup', { key: 'Enter' });

console.log(keyboardEvent.key); // Enter

40.11.2 커스텀 이벤트 디스패치

- 생성된 커스텀 이벤트는 dispatchEvent 메서드로 디스패치(이벤트를 발생시키는 행위) 할 수 있다.

- dispatchEvent 메서드에 이벤트 객체를 인수로 전달하면서 호출하면 인수로 전달한 이벤트 타입의 이벤트가 발생한다.

- 일반적으로 이벤트 핸들러는 비동기 처리 방식으로 동작하지만, dispatchEvent 메서드는 이벤트 핸들러를 동기 처리 방식으로 호출한다.

- 즉, dispatchEvent 메서드를 호출하면 커스텀 이벤트에 바인딩된 이벤트 핸들러를 직접 호출하는 것과 같다.

 

- 기존 이벤트 타입이 아닌 임의의 이벤트 타입을 지정하여 커스텀 이벤트 객체를 생성한 경우 반드시 addEventListener 메서드 방식으로 이벤트 핸들러를 등록해야 한다.

이웅모 님의〔 모던 자바스크립트 Deep Dive 〕책을 공부하며 정리했습니다.

'이것저것 스터디📚 > JavaScript - Deep Dive' 카테고리의 다른 글

DeepDive - 42장. 비동기 프로그래밍  (0) 2023.09.19
DeepDive - 41장. 타이머  (0) 2023.09.19
DeepDive - 39장. DOM  (0) 2023.09.04
DeepDive - 38장. 브라우저 렌더링 과정(HTTP)  (0) 2023.08.29
DeepDive - 37장.Set과 Map  (1) 2023.08.22

'이것저것 스터디📚/JavaScript - Deep Dive' Related Articles

티스토리툴바