[JavaScript] 이벤트 버블링, 캡쳐링, 위임 & HTTP 메소드

Q. 질문 1

이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요.

 (코드잇 스프린트 위클리 페이퍼 #5)

 

A. 답변

1. 이벤트 버블링

이벤트 버블링이란 무엇일까?

이벤트 버블링
이벤트가 발생하면, 같은 타입 이벤트를 가진 부모 핸들러도 동작

즉, 자식 요소에서 부모 요소로 이벤트가 전파되는 것을 이벤트 버블링이라고 한다.

 

버블링 적용

이런 코드가 있을 때,

<div id="content">
  content
  <h1 id="title">오늘 할 일</h1>
  <ol id="list">
    list
    <li class="item">자바스크립트 공부</li>
    <li class="item">유튜브 시청</li>
    <li class="item">저녁 약속</li>
  </ol>
</div>

 

요소를 클릭했을때, 실제 핸들러 이벤트가 동작하는 요소(currentTarget)와 문구를 출력하도록 자바스크립트 코드를 만든다.

const content = document.querySelector('#content');
const title = document.querySelector('#title');
const list = document.querySelector('#list');

content.addEventListener('click', function (e) {
  console.log('content Event');
  console.log(e.currentTarget);
});

title.addEventListener('click', function (e) {
  console.log('title Event');
  console.log(e.currentTarget);
});

list.addEventListener('click', function (e) {
  console.log('list Event');
  console.log(e.currentTarget);
});

 

'오늘 할 일' 요소를 클릭했을 때, 실제 그 요소만 출력 될 것 같지만, 이벤트 버블링에 의해 부모요소도 같이 출력이 된다.

오늘 할 일 클릭

 

버블링 막기

이벤트 버블링으로 인해 원치하는 요소도 같이 클릭이 된다.

그래서 버블링을 막기 위해 stopPropagation 을 사용할 수 있다. 그러나 꼭 필요한 경우가 아니라면 버블링을 굳이 막는 것을 추천하지 않는다.

title.addEventListener('click', function (e) {
  console.log('title Event');
  console.log(e.currentTarget);
  e.stopPropagation();
});

 

버블링을 막고 다시 '오늘 할 일' 요소를 클릭하면 해당 요소만 출력이 되는 것을 확인할 수 있다.

오늘 할 일 클릭

 

2. 이벤트 캡쳐링

이벤트 캡쳐링은 이벤트 버블링과 반대로 부모 -> 자식 으로 이벤트가 전파되는 것이다.

이는 실제 코드에서 자주 쓰이진 않지만, 종종 유용한 경우가 있다고 한다.

 

이벤트 캡쳐링 적용

캡쳐링을 사용하기 위해 addEventListener 의 3번째 프로퍼티로 true 값이나 { capture: true } 값을 주어야 한다.

content.addEventListener(
  'click',
  function (e) {
    ...
  },
  true
);

title.addEventListener(
  'click',
  function (e) {
    ...
  },
  true
);

list.addEventListener(
  'click',
  function (e) {
    ...
  },
  true
);

for (let item of items) {
  item.addEventListener(
    'click',
    function (e) {
      ...
    },
    true
  );
}

 

그래서 요소를 클릭하면 부모부터 자식으로 출력이 된다.

이벤트 캡쳐링

 

3. 이벤트 위임

이벤트 위임 이란 무엇일까?

이벤트 위임
자식 요소에서 발생하는 이벤트를 부모 요소에서 다루는 방식

자식 요소에 새로운 요소가 추가 된다면 기존에 등록한 이벤트 핸들러가 동작하지 않는다.

그래서 매번 이벤튼 핸들러를 추가해야 되는데, 이러한 번거로움을 이벤트 위임을 통해 해결할 수 있다.

 

이벤트 위임 적용해야 하는 이유

자식 요소에 클릭 이벤트를 적용하고, 새로운 요소를 추가하면 기존에 등록한 이벤트 핸들러가 동작하지 않는다.

그래서 매번 이벤트 핸들러를 추가해야 한다.

const list = document.querySelector('#list');

for (let item of list.children) {
  item.addEventListener('click', function (e) {
    e.target.classList.toggle('done');
  });
}

const item1 = document.createElement('li');
item1.classList.add('item');
item1.textContent = '일기 쓰기';
list.append(item1);

 

이벤트 위임 적용

하지만 부모 요소에서 자식 요소에서 발생하는 이벤트를 다루면, 새로운 요소 추가시에도 이벤트 적용이 잘 된다. 

const list = document.querySelector('#list');

list.addEventListener('click', function (e) {
  if (e.target.classList.contains('item')) {
    e.target.classList.toggle('done');
  }
});

const item2 = document.createElement('li');
item2.classList.add('item');
item2.textContent = '넷플릭스 시청';
list.append(item2);

 

Q. 질문 2

HTTP 메소드에 대해 설명해 주세요.

 (코드잇 스프린트 위클리 페이퍼 #5)

A. 답변

HTTP 메소드란?

HTTP 메소드란 무엇일까?

HTTP(Hypertext Transfer Protocol) 메소드
웹에서 데이터를 주고받는 프로토콜(통신 규칙 집합)
클라이언트가 서버에게 요청을 보내는 방식

일반적으로 사용되는 HTTP 메소드 종류에는 GET, POST, PUT, PATCH, DELETE 등이 있다.

 

HTTP 메소드

1. GET 메소드

서버로부터 데이터를 요청하기 위해 사용된다.

• 게시물 조회
• 댓글 조회
• 회원 정보 조회

2. POST 메소드

서버에 새로운 리소스 데이터를 제출할 때 사용된다.

• 게시물 작성
• 댓글 작성

3. PUT 메서드

기존 리소스의 데이터를 새로운 데이터로 대체하기 위해 사용된다.

기존 리소스가 없으면 새로운 리소스를 생성하기 위해 사용된다.

• 게시물 수정
• 댓글 수정

4. PATCH 메서드

리소스를 부분적으로 수정하기 위해 사용된다.

PUT과 달리 리소스의 전체를 교체하는 것이 아니라 일부만 변경한다.

• 회원 정보의 닉네임 수정

5. DELETE 메서드

지정된 리소스를 삭제할 때 사용된다.

• 게시물 삭제
• 댓글 삭제

---

 

이 밖에도 다양한 메서드들이 있으며

HTTP 프로토콜을 사용하는 웹 에서 클라이언트와 서버 간의 효율적인 통신을 할 수 있도록 도와준다.