내일배움캠프 React_7기 TIL - 15. Event

선·2024년 10월 24일

내일배움캠프_React_7기_TIL

목록 보기

15/40

Event란?

프로그래밍한 코드 내에서 발생하는 행동(사건)

이벤트 예시
유저가 어떤 요소를 선택하거나 어떤 요소 위에 커서를 올려둡니다(hover).
유저가 키보드에서 키를 선택합니다.
유저가 브라우저 창의 크기를 재조정하거나 닫습니다.
웹 페이지가 로딩을 완료했습니다.
양식(form)이 제출되었습니다.
비디오가 재생되거나, 멈추거나, 혹은 끝났습니다.
오류가 발생했습니다

시스템 또는 사용자의 상호작용에 의해 일어나는 신호 또는 트리거이다.

이벤트 리스너(event listener) & 핸들러(handler)

이벤트가 발생되면 실행되는 코드 블럭을 말함.(보통 콜백 함수의 형태) 그러한 코드 블럭이 이벤트에 응답해서 실행되기 위해 정의되었을 때 이벤트 핸들러를 등록했다라고 함.
리스너는 발생되는 이벤트를 듣고, 핸들러는 응답하여 실행되는 코드를 말함.

웹 이벤트는 Web APIs의 일부이며 JavaScript 문법은 아니다

web APIs?
Web API는 웹 브라우저가 제공하는 기능을 확장하여 웹 애플리케이션이 브라우저의 기본 기능이나 서버와 상호작용할 수 있게 해주는 인터페이스이다.
mdn의 Web APIs 문서에 Event가 있는 것을 확인할 수 있다.

event.target

movies_container.onclick = function (e) {
  let target = e.target;
  console.log(e);

event 객체를 콘솔로 확인해보면 다양한 정보들이 담겨있는 것을 확인할 수 있다.
이벤트의 type은 click이며, target은 img.poster-img 인 것을 확인할 수 있다.
즉 target을 통해 이벤트가 어떠한 요소에서 발생했는지 알 수 있다.

이벤트 버블링 (Event Bubbling)

이벤트 버블링은 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작, 그리고 부모 요소로 이어져 최상단의 조상 요소를 만날때까지 요소 각각에 할당된 핸들러가 동작하는 것을 말한다.

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

와 같은 예시를 실행해보면, <p>만 눌렀음에도 <form>에 등록된 이벤트 핸들러까지 동작하는 것을 확인할 수 있다. 즉, document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작하고 있다.
+형제 요소는 이벤트 버블링이 일어나지 않는다.

버블링 중단 event.stopPropagation()

<body onclick="alert(`버블링은 여기까지 도달하지 못합니다.`)">
  <button onclick="event.stopPropagation()">클릭해 주세요.</button>
</body>

버튼을 클릭해도 body에 등록된 핸들러가 실행되지 않는다.

이벤트 캡쳐링 (Event Capturing)

이벤트 캡처링은 이벤트가 부모 요소에서 자식 요소로 전파되는 과정이다. 일반적으로 버블링을 사용하지만, 필요에 따라 캡쳐링도 활용된다.

이벤트 캡쳐링 사용
이벤트 리스너를 추가할 때, 세 번째 인자를 true로 설정하면 캡처링 단계에서 이벤트를 처리할 수 있다. 기본값 false는 버블링 단계를 처리한다.

document.getElementById("parent").addEventListener("click", function() {
  console.log("Parent clicked (capturing)");
}, true); // true로 설정하여 캡처링 단계에서 처리

이벤트 위임 (Event Delegation)

이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다.

table.onclick = function(event) {
  let target = event.target; // 클릭이 발생한 요소 담음

  if (target.tagName != 'TD') return; // TD에서 발생한 게 아니라면 아무 작업도 하지 않는다.

  highlight(target); // 강조 함
};

부모 요소 table에 핸들러를 등록하고, 클릭한 요소가 table의 자식 요소일 경우에만 event.target에 그 자식 요소가 담긴다. 조건문으로 필요한 요소에만 작업을 수행한다.

// 이벤트 전이 관련 코드
movies_container.onclick = function (e) {
  let target = e.target;
  let card = target.closest(".movie-card");

  if (!card) return; // movie-card 클래스가 없으면 리턴

  fetchMovieDetail(card.value)
    .then((movieDetails) => {
      ...
    })
    .catch((err) => {
      console.error("영화 상세 정보를 가져오는 데 오류 발생:", err);
    });
};

이건 내가 이벤트 위임을 활용한 예시이다.
movies_container에 클릭이 일어나면, e.target이 target에 담기고, card에 .movie-card 클래스가 있는 요소를 찾으면 그 요소를 반환하고, 없으면 null을 반환되는 것을 이용하여, 클릭한 요소가 .movie-card의 자식 요소가 아니라면 함수가 종료되도록 했다.