#40 이벤트

오늘 시간은 이벤트에 대해 알아보는 시간이다.
그럼 한번 카즈하.

💡 읽고 지나가기

이벤트 핸들러: 이벤트가 발생했을 때 호출될 함수.
이벤트 핸들러 등록: 이벤트가 발생했을 때 이벤트 호출을 브라우저에 위임.
이벤트 중심으로 프로그램을 제어하는 방식을 이벤트 드리븐 프로그래밍이라 한다.

---

> 이벤트 타입

이벤트의 종류를 나타내는 문자열이다.
( 마우스, 키보드, 포커스, 폼, 값 변경, DOM 뮤테이션, 뷰, 리소스 등 약 200여가지 )
상세종류 (MDN 링크)

---

> 이벤트 핸들러 등록

이벤트 핸들러를 등록하는 방법은 총 3가지가 있는데 한번 살펴보자.

• 이벤트 핸들러 어트리뷰트

  HTML 요소의 어트리뷰트에 존재하는 이벤트 핸들러 어트리뷰트를 사용한다.
  이벤트 핸들러 어트리뷰트에 함수 호출문을 할당.

  <button onclick='handleClick()'>버튼</button>
  
  <script>
    handleClick = () => console.log('Clicked');
  </script>

  바닐라 자바스크립트에서는 이벤트 핸들러 어트리뷰트 방식은 사용을 지양.
  ( 자바스크립트와 HTML 간의 관심사를 분리하기 위해 )

  다만, React, Angular, Vue, Svelte 등의 모던 자바스크립트 프레임워크/라이브러리 등은
  컴포넌트를 기반으로 하기에 이 방식을 사용한다.

  // React
  return <button onClick={handleClick}>버튼</button>;

• 이벤트 핸들러 프로퍼티

  window 객체, DOM 노드 객체(Document, HTMLElement 타입의)에는 이벤트 핸들러 프로퍼티가 존재한다.
  이벤트 핸들러 프로퍼티에 함수를 바인딩 함.

  <button>버튼</button>
  
  <script>
    const $btn = document.querySelector('button');
    $btn.onclick = () => console.log('clicked');
  </script>

  이벤트 핸들러 프로퍼티에는 하나의 이벤트 핸들러만 바인딩이 가능하다.

• addEventListener 메서드 방식

  DOM Level2에서 도입.
  EventTarget.addEventListener('eventType', Fn, [useCapture])
  마지막 인수는 이벤트를 캐치할 전파 단계를 지정.
  ( true: 캡처링 단계, false: 버블링 단계[기본값] )

  <button>버튼</button>
  
  <script>
    const $btn = document.querySelector('button');
    const handleClick = () => console.log('handleClick 함수');
    
    $btn.onclick = () => console.log('이벤트 핸들러 프로퍼티에 등록');
    $btn.addEventListener('click', () => console.log('무명함수'))
    $btn.addEventListener('click', () => console.log('무명함수'))
    
    $btn.addEventListener('click', handleClick);
    $btn.addEventListener('click', handleClick); // 중복 등록 X
  </script>

  이벤트 핸들러 프로퍼티에 바인딩된 이벤트에는 영향을 미치지 않으며,
  별개의 이벤트로 둘다 실행이된다.
  또한 addEventListener 메서드를 이용해 이벤트를 등록하면 중복 등록이 가능하며, 등록된 순서대로 호출된다.
  다만, 참조가 동일한 함수를 중복등록 하게 되면 한번만 등록되게 된다.

---

> 이벤트 핸들러 제거

EventTarget.removeEventListener('eventType', Fn, [useCapture])를 이용하여 제거.
두번째 인자로 전달된 참조가 동일한 함수를 가진 이벤트를 제거한다.
( 무명 함수 또는 전달된 함수의 참조가 다르면 제거할 수 없다. )
세번째 인자인 option 또는 usecapture의 상태도 동일한 이벤트 만을 제거.
( 그냥 이벤트 등록시 addEventListener 메서드의 인자와 동일한 이벤트만을 제거한다 보면 될듯 함. )

<button>버튼</button>

<script>
  const $btn = document.querySelector('button');
  const handleClick = () => console.log('clicked');
  
  $btn.addEventListener('click', handleClick);
  
  $btn.removeEventListener('click', handleClick, true); // 실패
  $btn.removeEventListener('click', handleClick); // 성공
</script>

---

> 이벤트 객체

이벤트가 발생하면 이벤트 객체( 이벤트의 다양한 정보를 담은 객체 )가 동적으로 생성되며,
이때 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인자로 전달된다.
( 브라우저가 이벤트 핸들러를 호출할 때 이벤트 객체를 인자로 전달 )

<span></span>

<script>
  const $span = document.querySelector('span');
  const printCoords = (e) => {
    $span.textContent = `x: ${e.clientX}, y: ${e.clientY}`;
  }
  
  document.addEventListener('click', printCoords);
</script>

클릭 이벤트에 의해 생성된 이벤트 객체는 이벤트 핸들러의 첫 인수로 전달되기 때문에,
매개변수 e에 암묵적으로 할당.

만약 이벤트 핸들러 어트리뷰트 방식으로 등록했다면, 매개변수는 반드시 event여야 한다.

• 이벤트 객체의 상속 구조

  

  이벤트 객체는 위와 같은 상속구조를 갖는다.
  위 그림은 모두 생성자 함수이기에, 생성자 함수를 호출하여 이벤트 객체 생성이 가능하다.

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

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

  공통 프로퍼티	설명	타입
  type	이벤트 타입	string
  target	이벤트를 발생시킨 DOM 요소	DOM 요소 Node
  currentTarget	이벤트 핸들러가 바인딩된 DOM 요소	DOM 요소 Node
  eventPhase	이벤트 전파 단계 ( 0: 이벤트 없음, 1: 캡처링, 2: 타겟, 3: 버블링 )	number
  bubbles	이벤트를 버블링으로 전파하는지 여부	boolean
  cancleable	preventDefault()로 기본 동작 취소 가능 여부	boolean
  defaultPrevented	preventDefault() 호출 여부	boolean
  isTrusted	사용자에 의해 발생한 이벤트일 경우 true	boolean
  timeStamp	이벤트 발생 시간	number

---

> 이벤트 전파

이벤트가 전파되는 일반적인 과정은 과정은 다음과 같다.

1. DOM 트리 상에 존재하는 DOM 요소 노드에서 이벤트 발생.
2. 이벤트 객체가 생성되면 window에서 이벤트 타겟 방향으로 전파. ( 캡처링 단계 )
3. 이벤트 객체가 이벤트를 발생시킨 이벤트 타켓에 도달. ( 타겟 단계 )
4. 이벤트 객체가 이벤트 타겟에서 window 방향으로 전파. ( 버블링 단계 )

위와 같은 단계를 거치기에 이벤트는 이벤트 타겟은 물론 상위 DOM 트리에서도 캐치할 수 있다.

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

---

> 이벤트 위임

여러개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하여 사용하는 방법이다.

이벤트 위임을 사용하면 여러개의 하위 DOM 요소에 이벤트 핸들러를 각각 등록할 필요가 없으므로 성능 향상에 도움이 된다.
( 동적으로 하위 DOM 요소가 추가되어도 추가적으로 각각 핸들러를 등록해주는 작업을 할 필요가 없다 )

주의할 점은 상위 요소에 이벤트 핸들러를 등록하기에 이벤트 객체의 target 프로퍼티와 currentTarget 프로퍼티가 서로 다른 DOM 요소를 가리킬 수 있다.

따라서, 이벤트 핸들러에서 이벤트가 발생한 요소를 한번더 체크해 주는 것이 좋다.

<ul>
  <li>케스</li>
  <li>셩</li>
  <li>영서</li>
</ul>

<script>
  const $ul = document.querySelector("ul");
  $ul.addEventListener('click', (e) => {
    if (e.target.matches('ul > li')) console.log(e.target.textContent);
  });
 </script>

※ 참조
Element.prototype.matches : 인수로 전달된 선택자에 의해 특정 노드를 탐색 가능한지 확인

---

> DOM 요소의 기본 동작 조작

• DOM 요소의 기본 동작 중단

  이벤트 객체의 preventDefault 메서드를 사용하여, DOM 요소의 기본 동작을 중단 시킬수 있다.

  <button type='submit'>버튼</button>
  
  <script>
    const $btn = document.querySelector('button');
    $btn.onclick = (e) => {
      e.preventDefault(); // button 요소의 type: submit 기본 기능을 중단.
    };
  </script>

• 이벤트 전파 방지

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

  <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>

---

> 이벤트 핸들러 내부의 this

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

  핸들러 내부의 this는 전역 객체( window )를 가리킨다.
  이벤트 핸들러를 호출할 때 인수로 전달한 this는 이벤트를 바인딩한 DOM 요소를 가리킨다.

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

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

  <button class="btn1">0</button>
  <button class="btn2">0</button>
  <script>
    const $button1 = document.querySelector('.btn1');
    const $button2 = document.querySelector('.btn2');
  
    // 이벤트 핸들러 프로퍼티 방식
    $button1.onclick = function(e) {
      // this는 이벤트를 바인딩한 DOM 요소를 가리킨다.
      console.log(this); // $button1
      console.log(e.currentTarget); // $button1
      console.log(this === e.currentTarget); // true
  
      // $button1의 textContent를 1 증가.
      ++this.textContent;
    }
    
    // addEventListener 메서드 방식
    $button2.addEventListener('click', function(e) {
      // this는 이벤트를 바인딩한 DOM 요소를 가리킨다.
      console.log(this); // $button2
      console.log(e.currentTarget); // $button2
      console.log(this === e.currentTarget); // true
  
      // $button2의 textContent를 1 증가.
      ++this.textContent;
    })
  </script>

  
  

  단, 이벤트 핸들러에 화살표 함수를 사용할 경우 함수 자체 this 바인딩을 갖지 않기에 상위 스코프의 this를 가리킨다.

  <button class="btn1">0</button>
  <button class="btn2">0</button>
  
  <script>
    const $button1 = document.querySelector('.btn1');
    const $button2 = document.querySelector('.btn2');
  
    // 이벤트 핸들러 프로퍼티 방식
    $button1.onclick = e => {
      // this는 이벤트를 바인딩한 DOM 요소를 가리킨다.
      console.log(this); // window
      console.log(e.currentTarget); // $button1
      console.log(this === e.currentTarget); // false
  
      // this는 window를 가리키므로 window.textContent에 NaN을 할당한다.
      ++this.textContent;
    }
    
    // addEventListener 메서드 방식
    $button2.addEventListener('click', e => {
      // this는 이벤트를 바인딩한 DOM 요소를 가리킨다.
      console.log(this); // window
      console.log(e.currentTarget); // $button2
      console.log(this === e.currentTarget); // false
    
      // this는 window를 가리키므로 window.textContent에 NaN을 할당한다.
      ++this.textContent;
    });
  </script>

---

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

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

<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>

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

<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>

---

> 커스텀 이벤트

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

• 커스텀 이벤트 생성

  일반적으로 CustomEvent 이벤트 생성자 함수를 사용한다.

  const customEvent = new CustomEvent('foo');
  console.log(customEvent.type); // foo

  위와 같이 생성된 커스텀 이벤트 객체는 버블링되지 않으며 preventDefault 메서드로 취소할 수도 없다.
  즉, 커스텀 이벤트 객체는 bubles, cancelable 프로퍼티 값이 false로 기본 설정된다.
  ( 이벤트 생성자 함수의 두번째 인수로 이벤트 고유의 프로퍼티를 갖는 객체를 전달하면 의도대로 설정할 수 있다. )

  이벤트 생성자 함수로 생성한 커스텀 이벤트는 isTrusted 프로퍼티의 값은 항상 false이다.
  반면, 커스텀 이벤트가 아닌 사용자의 행위에 의해 발생한 이벤트에 의해 생성된 이벤트 객체의 isTrusted 프로퍼티의 값은 항상 true 이다.

• 커스텀 이벤트 디스패치

  위와 같은 방법으로 생성된 커스텀 이벤트는 dispatchEvent 메서드로 이벤트를 발생시킬 수 있다.

  <button>버튼</button>
  
  <script>
    const $button = document.querySelector('button');
    
    $button.addEventListener('click', e => {
      console.log(e);
      alert(`${e} Clicked!`);
    });
    
    const customEvent = new MouseEvent('click');
    
    $button.dispatchEvent(customEvent);
  </script>

  일반적인 이벤트 핸들러는 비동기처리 방식으로 동작하지만 dispatchEvent 메서드는 이벤트 핸들러를 동기처리 방식으로 호출한다.
  ( dispatchEvent 메서드를 사용하면 커스텀 이벤트에 바인딩된 이벤트 핸들러를 직접 호출 하는 것과 같다. )
  그렇기 때문에 디스패치 하기 전 커스텀 이벤트를 처리할 이벤트 핸들러를 미리 등록해야 한다.

  CustomEvent 생성자 함수를 이요할 경우,
  두번째 인수로 이벤트와 함께 전달하고 싶은 정보를 담은 detail 프로퍼티를 포함하는 객체를 전달 할 수 있다.
  이는 이벤트 객체의 detail 프로퍼티(e.detail)에 담겨 전달된다.

  <button>버튼</button>
  
  <script>
    const $button = document.querySelector('button');
    
    $button.addEventListener('foo', e => {
      alert(e.detail.message);
    });
    
    const customEvent = new CustomEvent('foo', {
      detail: { mesage: 'Hello' }
    });
    
    $button.dispatchEvent(customEvent);
  </script>

  기존 이벤트 타입이 아닌 임의의 이벤트 타입을 지정하여 커스텀 이벤트 객체를 생성한 경우 반드시 addEventListener 메서드 방식으로 이벤트 핸들러를 등록해주어야 한다.
  ( 요소 노드에 'on + 이벤트 타입'으로 이루어진 이벤트 핸들러 어트리뷰트/프로퍼티가 존재하지 않기 때문. )