실습용 CodePen

이벤트 버블링/캡처링, `stopPropagation()`, `preventDefault()`까지 모두 실습할 수 있도록 작성

See the Pen Learn Event Propagation 이벤트 전파 실습 by ColorFilter (@colorfilter) on CodePen.

이벤트 전파 | Event Propagation

버블링 Bubbling / 캡처링 Capturing

위 코드펜 예제에서 하단에 있는 span 태그를 클릭하면 ➊ "span 영역" → ➋ "p 영역" → ➌ "div" 영역 순으로 콘솔이 찍힌다. span 영역을 클릭한 순간 브라우저가 이벤트를 감지해서 최상위에 있는 요소까지 이벤트가 전달되는 것. 이것을 이벤트 버블링이라고 부른다.

이벤트 캡처링은 버블링 반대방향으로 진행된다. addEventListener() 3번째 인자에 true를 명시하면 된다. 이는 { capture: true } 를 명시한 것과 같다. 기본 값은 { capture: false }다.

하단의 span 태그를 클릭하면 콘솔에 ➊ "div 영역" → ➋ "p 영역" → ➌ "span" 영역 순으로 콘솔이 찍힌다. <span> 태그를 클릭한 순간 최상위 요소 <html> 태그부터 이벤트가 발생한 <span> 태그까지 내려가며 탐색하기 시작한다. 탐색하는 과정에서 중간을 거치는 요소에 할당된 핸들러가 실행돼서 콘솔이 찍히는 것.

❶ 이벤트 버블링(Event Bubbling) : 아래 → 위

`target` (이벤트가 발생한 요소) → `...` → `body` → `html`

❷ 이벤트 캡처링(Event Capturing): 위 → 아래

`html` → `body` → `...` → `target` (이벤트가 발생한 요소)

❸ `addEventListener()` 3번째 파라미터가 캡처링 여부 결정

이벤트 버블링 : `{ capture: false }` 혹은 `false` 혹은 아무것도 입력하지 않았을 때

// 아래 3개 동일
addEventListener('click', handler); // 3번째 인자에 아무것도 입력하지 않으면 버블링 기본
addEventListener('click', handler, false);
addEventListener('click', handler, { capture: false });

이벤트 캡처링 : `{ capture: true }` 혹은 `true`

// 아래 2개 동일
addEventListener('click', handler, true);
addEventListener('click', handler, { capture: true });

리스너 옵션

addEventListener 의 3번째 인자엔 capture외에 2가지 옵션이 더 있다.

❶ once : 값 Boolean. `true`면 이벤트는 1번만 실행되고 리스너가 삭제된다

addEventListener('click', handler, { once: true }); // 혹은 { once: false }

❷ passive : 값 Boolean. `true` 면 이벤트 핸들러에 `preventDefault()` 가 있어도 호출하지 않는다

`preventDefault` API 호출 여부를 명시하는 옵션이다. 브라우저는 기본적으로 `preventDefault` 호출 여부를 감시하는데, `passive` 속성을 `true` 로 줌으로써 이런 감시 비용을 줄일 수 있다.

addEventListener('click', handler, { passive: true }); // 혹은 { passive: false }

💡 명시하지 않았을 때 기본값은 `false` 지만 wheel, mousewheel, touchstart, touchmove 이벤트에선 기본값이 `true` 인 점 주의(Safari, IE 제외) — 참고

리스너 제거 removeEventListener

이벤트 리스너를 제거할 때 removeEventListener 메서드를 사용한다. 주의할 점은 이벤트를 등록했을 때의 핸들러(콜백)와, capture 리스너 옵션(리스너 3번째 매개변수) 값이 일치해야만 제거된다. 따라서 이벤트 리스너를 제거할 땐 이벤트를 등록했을 때와 동일한 핸들러와 capture 옵션을 명시해야 한다.

💡 `once` 나 `passive` 옵션은 리스너를 제거할 때 검사하지 않으므로 일치하지 않아도 된다.

// 이벤트 등록(3번째 인자에 아무것도 명시하지 않았으므로 { capture: false }와 같다)
element.addEventListener('click', handler);

// 이벤트 제거
element.removeEventListener('click', handler); // 제거 성공
element.removeEventListener('click', handler, false); // 제거 성공
element.removeEventListener('click', handler, { capture: false }); // 제거 성공
element.removeEventListener('click', handler, { passive: true }); // 제거 성공
element.removeEventListener('click', handler, true); // 제거 실패(capture 옵션이 다르므로)
element.removeEventListener('click', handler2, false); // 제거 실패(핸들러가 다르므로)

이벤트 단계 | Event Phase

<div>
  DIV
  <p>
    P<span>SPAN</span>
  </p>
</div>;

for (let elem of document.querySelectorAll('*')) {
  // 첫번째 리스너
  elem.addEventListener('click', (e) => alert(`캡쳐링: ${elem.tagName}`), true);
  // 두번째 리스너
  elem.addEventListener('click', (e) => alert(`버블링: ${elem.tagName}`));
}

위 코드의 이벤트 흐름은 아래 3가지 단계를 거친다.

Capturing 단계 : 이벤트가 하위 요소로 전파되는 단계
Target 단계 : 이벤트가 (이벤트가 발생한)Target 요소에 전달되는 단계
Bubbling 단계 : 이벤트가 상위 요소로 전파되는 단계

HTML 하위에 있는 모든 태그에 이벤트 캡처링 / 버블링 순서로 핸들러를 할당하고 가장 아래에 있는 span 태그를 클릭해보면 아래 순서대로 이벤트가 전달되는걸 확인할 수 있다.

HTML → BODY → DIV → P (이벤트 캡처링 단계 / 1번째 리스너)
SPAN (Target 단계 / 캡처링, 버블링 리스너 둘 다 설정했으므로 2번 호출)
P → DIV → BODY → HTML (이벤트 버블링 단계 / 2번째 리스너)

💡 `event.eventPhase` 메서드로 이벤트 실행 단계를 확인할 수도 있다. 반환하는 값은 `0` 이벤트 없음, `1` 이벤트 캡처, `2` 이벤트 타겟, `3` 이벤트 버블

See the Pen Event Phase 이벤트 흐름 by ColorFilter (@colorfilter) on CodePen.

e.target / e.currentTarget

event.currentTarget : 현재 실행중인 핸들러가 할당되어 있는 요소(이벤트를 핸들링하고 있는 현재 요소)
event.target : 이벤트가 발생한 요소. 이벤트 전파가 진행되더라도 변하지 않는다

아래 코드에서 <p> 태그의 부모 요소인 <div>에 이벤트 핸들러를 할당했다. p 태그를 클릭하면, 이벤트가 발생한 곳(p 태그)이므로 target이 되고, 이벤트 핸들러를 등록해놓은 div는 currentTarget이 된다.

<p> 태그는 이벤트 버블링으로 이벤트를 위임받았기 때문에, <div> 태그의 addEventListener로 <p> 태그 정보가 전달된 것이다.

<div>
  DIV 태그
  <p>P 태그</p>
</div>;

const $div = document.querySelector('div');
$div.addEventListener('click', (e) => {
  console.log(`currentTarget: ${e.currentTarget.tagName}`);
  console.log(`target: ${e.target.tagName}`);
});

// <p> 태그 클릭시...
// "currentTarget: DIV"
// "target: P"

See the Pen event.currentTarget vs event.target by ColorFilter (@colorfilter) on CodePen.

이벤트 전파 중단 Stop Propagation

아래 전파중단 API를 사용하면, ➊이벤트 버블링일 땐 클릭한 요소의 이벤트만 발생시키고 상위 요소로 이벤트를 전달하지 않는다. ➋이벤트 캡처링일 땐 클릭한 요소의 최상위 요소의 이벤트만 동작시키고 이벤트가 발생한 요소를 제외한 다른 하위 요소엔 이벤트를 전달하지 않는다.

const eventHandler = (event) => {
    // 생략...
    event.stopPropagation();
    event.preventDefault();
    event.stopImmediatePropagation();
}

event.preventDefault() : 이벤트 기본 동작 중단
event.stopPropagation() : 이벤트 전파 중단
event.stopImmediatePropagation() : 이벤트 전파 중단. 현재 레벨에 걸려 있는 다른 이벤트도 중단.

이벤트 전파 중단 API를 사용한 영역은 Dead Area가 되므로 click 같은 사용자 이벤트를 분석할 때 Dead Area는 분석 할 수 없게 된다. 아키텍처를 잘 고려한 경우가 아니라면 이벤트 전파 중단 API를 남용하지 않도록 한다.

이벤트 버블링을 막아야 하는 경우는 거의 없습니다. 버블링을 막아야 해결되는 문제라면 커스텀 이벤트 등을 사용해 문제를 해결할 수 있습니다... 핸들러의 event 객체에 데이터를 저장해 다른 핸들러에서 읽을 수 있게 하면, 아래쪽에서 무슨 일이 일어나는지를 부모 요소의 핸들러에게 전달할 수 있으므로, 이 방법으로도 이벤트 버블링을 통제할 수 있습니다. — JavaScript Info

stopPropagation() vs stopImmediatePropagation()

💡 1개 요소에 핸들러를 여러개 할당했다면 핸들러를 할당한 순서(위 → 아래)대로 작동한다.

아래처럼 1개 요소에 2개의 클릭 이벤트가 걸려 있고, 이벤트 핸들러에 stopPropagation()을 명시했다고 가정해본다. span 엘리먼트를 클릭하면 이벤트 전파는 중단되지만 클릭한 엘리먼트에 걸려 있는 핸들러 모두 실행된다(해당 엘리먼트에 걸려 있는 모든 이벤트 호출).

const $span = document.querySelector('#span');
$span.addEventListener('click', (e) => eventHandler); // 1번째 이벤트
$span.addEventListener('click', (e) => eventHandler); // 2번째 이벤트

stopImmediatePropagation()은 이벤트가 발생한 엘리먼트에 걸려 있는 다른 이벤트의 전파도 중단시킨다. 위 코드를 예로들면 span 엘리먼트를 클릭한 순간 이벤트 전파가 중단되면서 1번째 이벤트(핸들러)만 호출된다. 2번째 이벤트(핸들러)는 호출되지 않는다.

See the Pen [Event] stopPropagation() vs stopImmediatePropagation() by ColorFilter (@colorfilter) on CodePen.

preventDefault()

💡 포커스가 해제되는 `blur` 이벤트를 방지할 때도 `preventDefault` 메서드를 사용한다 — 참고 노트

<a id="a" href="https://romantech.net" target="_blank">
  A 영역 링크
</a>;

<a> 태그는 href 속성에 명시한 URL로 이동하는 이벤트 동작을 기본적으로 가지고 있다. <a> 태그 처럼 기본적으로 가지고 있는 (이벤트)동작을 방지하고 싶을 땐 핸들러에 preventDefault()를 명시하면 된다. 그럼 <a> 태그는 클릭해도 링크로 이동하지 않고, <form> 태그는 submit 버튼을 눌러도 서버로 자동 전송되지 않는다.

See the Pen [Event] preventDefault() by ColorFilter (@colorfilter) on CodePen.

이벤트 위임 | Event Delegation

See the Pen Event Delegation 이벤트 위임 by ColorFilter (@colorfilter) on CodePen.

이벤트 위임은 하위 요소에 이벤트를 붙이지 않고, 상위 요소에서 하위 요소의 이벤트를 제어하는 방식(패턴)이다. 아래 예제에서 할 일 목록에 있는 체크박스에 체크하면, 체크한 할 일 텍스트가 우측 DoneList에 추가된다. 체크박스 <input type="checkbox">에 일일이 이벤트 리스너를 붙일 수 있지만, 그렇게 하면 새로운 할 일을 추가할 때마다 이벤트를 붙여야 하기 때문에 번거롭다.

이런 번거로움을 해소하기 위해 사용하는 것이 바로 이벤트 위임 패턴이다. 가장 상위에 있는 <ul> 태그에만 이벤트 리스너를 추가해두면, 이벤트 버블링으로 인해 하위 요소에서 발생한 이벤트를 감지한다. 새로운 할 일(체크박스)이 추가돼도 이벤트를 수동으로 붙이지 않아도 되기 때문에 편리하다.

💡 radio 타입의 `<input>` 은 1개만 선택 할 수 있고, checkbox 타입의 `<input>` 은 여러 개 선택 할 수 있다. `name` 속성은 체크박스의 이름을 나타내며 같은 분류의 체크박스를 그룹으로 묶을 때 사용한다. React, Vue에서 특정 `<input>` 태그를 식별할 때 `name` 속성을 활용하기도 한다. form 태그로 데이터를 전송하면 `<input>` 의 `name`, `value` 속성 값이 `...?name=value` 형태로 전송된다. — 참고 링크

💡 `<label>` 태그와 `<input>` 태그를 연결하면 `<label>` 의 textContent 영역만 클릭해도 input 체크박스를 핸들링할 수 있다. `<label>` 태그의 `for` 속성과 `<input>` 태그의 `id` 속성 값을 동일하게 입력하면 두 태그를 연결할 수 있다. 접근성을 고려해 `<input>` 과 `<label>` 태그는 같이 쓰는게 좋다. `<input>` 태그가 `<label>` 안쪽에 있다면 연결된 상태가 되므로 `for`, `id` 를 입력하지 않아도 된다. — 참고 링크

<ul class="itemList">
  <li>
    <input type="checkbox" id="item1" />
    <label for="item1">Learn JavaScript</label>
  </li>
</ul>;

const $itemList = document.querySelector('.itemList');
$itemList.addEventListener('input', updateDoneList);
// updateDoneList 핸들러는 체크한 할 일을 DoneList에 추가한다.
// input 이벤트 타입은 <input>, <select>, <textarea> 요소의 value 속성이 바뀔 때마다 호출

elem.closest()

addEventListener의 이벤트 타입을 'input'으로 입력했기 때문에 <input> 태그에 이벤트가 발생했을 때만 호출된다. 'input' 이벤트 타입은 <input> <select> <textarea> 요소의 value 속성이 바뀔 때만 호출되기 때문이다.

💡 elem.closest(selector) 메서드로 부모 요소를 쉽게 탐색할 수 있다. closest() 파라미터에 명시한 문자열과 일치하는 노드를 찾을 때까지 자신(e.target)부터 시작해서 부모 요소 단위로 탐색한다(문서 루트까지). 조건을 만족한 가장 가까운 요소를 반환하며(부모 요소를 찾을 땐 가장 가까운 부모), 없으면 null 을 반환한다. 자신부터 탐색하므로 이벤트가 발생한 엘리먼트 자신을 반환할 수도 있다.

만약 이벤트 타입을 click 으로 입력했다면 <input> 뿐만 아니라, <label> <li> 태그의 이벤트도 감지한다. 이 상황에서 <input> 타입 이벤트만 사용하려면 elem.closest() 을 사용하면 된다.

// addToDoneList 이벤트 핸들러
const updateDoneList = (e) => {
  // 넘어온 이벤트가 checkbox 타입의 input 요소라면, 해당 요소 정보가 input 변수에 담긴다
  // 셀렉터에 명시한 노드를 찾지 못했다면 null 반환
  const input = e.target.closest('input[type=checkbox]');
  if (input) {
    // ...
  }
};

데이터 속성 | Data Attribute

어느 엘리먼트에든 data- 로 시작하는 속성을 사용할 수 있다. 화면엔 보이지 않는 텍스트나 정보를 엘리먼트에 담아둘 때 유용하다. React나 Vue에서 리스트 엘리먼트를 렌더할 때 key를 지정하는데, 이것 역시 데이터 속성을 사용해서 구현할 수 있다.

<li data-key="item3">Do exercise</li>;

자바스크립트에선 elem.dataset 객체로 접근할 수 있다.

e.target.dataset.key; // item3
document.querySelect('li').dataset.key; // item3

데이터 속성은 HTML 속성이기 때문에 CSS를 통해 접근해서 화면에 보이도록 할 수도 있다.

li::before {
  content: attr(data-key);
}

각 데이터 값에 따라 스타일을 다르게 지정할 수도 있다.

li[data-key='item3'] {
  color: red;
}

데이터 속성과 이벤트 위임 활용

저장하기, 불러오기 등의 버튼을 구현해야 된다고 가정해본다. 각 버튼 액션의 메서드는 이미 구현된 상태다. 다음 스텝은 버튼과 메서드를 연결할 차례. 이때 각 버튼에 일일이 핸들러를 할당하지 않고 이벤트 위임과 데이터 속성을 사용해서 더욱 세련되게 구현할 수 있다.

<div id="menu">
  <button data-action="save">저장하기</button>
  <button data-action="load">불러오기</button>
  <button data-action="search">검색하기</button>
</div>;

const buttonAction = {
  save() {
    alert('저장하기');
  },
  load() {
    alert('불러오기');
  },
  search() {
    alert('검색하기');
  },
};

// id 속성은 querySelector를 쓰지 않아도 id 이름으로 엘리먼트에 접근할 수 있다.
menu.addEventListener('click', (e) => {
  const actionName = e.target.dataset.action; // save 혹은 load 혹은 search
  if (actionName) {
    buttonAction[actionName]();
  }
});

See the Pen 데이터 속성과 이벤트 위임 활용 예시 1 by ColorFilter (@colorfilter) on CodePen.

행동 패턴 — 카운터 구현

💡 `document` 레벨에 핸들러를 할당할 땐 항상 `addEventListener`를 사용한다. `document`에 여러개의 핸들러를 할당하는 것은 프로젝트에서 일반적으로 사용되는 방식이다.

이벤트 위임과 데이터 속성을 활용해 선언적 방식으로 특정 "행동"을 추가할 수 있다. 아래 예시는 버튼을 클릭하면 숫자가 증가하는 "행동"을 데이터 속성의 data-counter를 이용해 부여한 예시

<input type="button" value="1" data-counter />
<input type="button" value="2" data-counter />

document.addEventListener('click', (e) => {
  // 데이터 속성의 값은 없고 key(data-counter)만 있다면 조회했을 때 빈 문자열로 나온다
  // 따라서 아래처럼 !== undefined 조건을 명시한다
  if (e.target.dataset.counter !== undefined) {
    event.target.value++;
  }
});

See the Pen 데이터 속성과 이벤트 위임 활용 예시 2 - 카운터 구현(행동 패턴) by ColorFilter (@colorfilter) on CodePen.

행동 패턴 — 토글러 구현

data-toggle-id 데이터 속성이 있는 요소(아래 예제에서 button)를 클릭하면, 해당 데이터 속성 값을 id로 가지는 요소를 보이거나 사라지도록 할 수 있다. 자바스크립트를 사용하지 않고도 태그에 data-toggle-id 속성만 추가하면(토글 행동을 선언 해주기만 하면) 요소에 토글 기능을 추가할 수 있기 때문에 편리하다.

💡 html 태그에 hidden 속성을 추가하면 해당 요소를 화면에서 감출 수 있다. 화면엔 보이지 않지만 영역은 그대로 유지하는 visibility: hidden 과는 달리, 감춘 영역도 사라진다. display: none; 속성과 비슷하다(CSS). 스크린 리더 같은 다른 표시 방식에도 숨겨지므로 주의한다.

<button data-toggle-id="subscribe-mail">구독 폼 보기</button>

<section id="subscribe-mail" hidden>
  <form>이메일<input type="email" /></form>
</section>

document.addEventListener('click', (e) => {
  const id = e.target.dataset.toggleId;
  if (!id) return;
  const elem = document.getElementById(id);
  elem.hidden = !elem.hidden;
});

See the Pen 데이터 속성과 이벤트 위임 활용 예시 3 - 토글러 구현(행동 패턴) by ColorFilter (@colorfilter) on CodePen.

레퍼런스

유용한 사이트

Explore DOM Events

참고 사이트

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요

저작자표시 비영리 변경금지

'🪄 Programming' 카테고리의 다른 글

[Git] SSH 공개키 만들기 / Credential 인증 시스템 (0)	2024.04.26
[HTML/CSS] focus-within — 자식 요소가 포커스 됐을 때 부모 스타일 지정 (0)	2024.04.25
[HTML/CSS] 시맨틱 태그 Semantic Tag (0)	2024.04.25
[JS] 알면 유용한 자바스크립트 최신 문법 (0)	2024.04.25
[JS] 자바스크립트 옵셔널 체이닝 (0)	2024.04.25

[JS] 이벤트 전파(캡처링, 버블링) / 이벤트 위임 / 데이터 속성

실습용 CodePen

이벤트 전파 | Event Propagation

버블링 Bubbling / 캡처링 Capturing

리스너 옵션

리스너 제거 removeEventListener

이벤트 단계 | Event Phase

e.target / e.currentTarget

이벤트 전파 중단 Stop Propagation

stopPropagation() vs stopImmediatePropagation()

preventDefault()

이벤트 위임 | Event Delegation

elem.closest()

데이터 속성 | Data Attribute

데이터 속성과 이벤트 위임 활용

행동 패턴 — 카운터 구현

행동 패턴 — 토글러 구현

레퍼런스

유용한 사이트

참고 사이트

'🪄 Programming' 카테고리의 다른 글

댓글

이 글 공유하기

티스토리툴바

실습용 CodePen

이벤트 전파 | Event Propagation

버블링 Bubbling / 캡처링 Capturing

리스너 옵션

리스너 제거 removeEventListener

이벤트 단계 | Event Phase

e.target / e.currentTarget

이벤트 전파 중단 Stop Propagation

stopPropagation() vs stopImmediatePropagation()

preventDefault()

이벤트 위임 | Event Delegation

elem.closest()

데이터 속성 | Data Attribute

데이터 속성과 이벤트 위임 활용

행동 패턴 — 카운터 구현

행동 패턴 — 토글러 구현

레퍼런스

유용한 사이트

참고 사이트

'🪄 Programming' 카테고리의 다른 글

댓글

이 글 공유하기

다른 글

[Git] SSH 공개키 만들기 / Credential 인증 시스템

[HTML/CSS] focus-within — 자식 요소가 포커스 됐을 때 부모 스타일 지정

[HTML/CSS] 시맨틱 태그 Semantic Tag

[JS] 알면 유용한 자바스크립트 최신 문법

티스토리툴바