javascript+es6

[ javascript ] 13. 이벤트 흐름(버블링과 캡처링) , preventDefault

변쌤(이젠강남) 2023. 9. 27. 11:35
반응형

# 이벤트흐름 : 버블링과 캡처링

 

자바스크립트 이벤트 핸들링에서 "버블링(Bubbling)"과 "캡처링(Capturing)"은 이벤트가 DOM 트리를 통해 전파되는 방식을 설명합니다. 이 두 용어는 이벤트의 전파 방향을 설명하는데 사용됩니다.

 

 

1. 캡처링 (Capturing)


캡처링은 이벤트가 최상위 요소에서 시작하여 하위 요소로 이동하는 단계입니다. 이벤트가 트리의 루트에서 시작하여 이벤트 대상 요소까지 이동합니다.


2. 버블링 (Bubbling)

버블링은 이벤트가 대상 요소에서 시작하여 최상위 요소로 이동하는 단계입니다. 이벤트가 발생한 요소부터 시작하여 부모 요소, 그 부모의 부모 요소로 계속해서 이동합니다.


이벤트 전파 단계

캡처링 단계: 이벤트는 최상위 요소에서 시작하여 대상 요소로 향합니다.
대상 요소에서 캡처링과 버블링 사이: 이벤트가 대상 요소에 도달합니다. 이 단계에서는 이벤트가 대상 요소에서만 처리됩니다.
버블링 단계: 이벤트는 대상 요소에서 시작하여 최상위 요소까지 거슬러 올라갑니다.

 

이벤트 흐름

이벤트가 발생하면, 브라우저는 해당 이벤트를 이벤트 트리거된 요소뿐만 아니라 그 요소의 부모, 조상 요소까지 전파합니다. 이 과정은 세 단계로 나뉩니다.

  1. 캡처링 단계(Capturing Phase): 이벤트가 최상위 부모 요소(예: window)에서 시작하여 이벤트가 발생한 요소에 도달할 때까지 아래로 내려갑니다.
  2. 타겟 단계(Target Phase): 이벤트가 실제로 발생한 요소에 도달합니다.
  3. 버블링 단계(Bubbling Phase): 이벤트가 다시 최상위 부모 요소까지 올라가면서 전파됩니다.

 

  • 캡처링: 이벤트가 부모 요소에서 자식 요소로 내려가는 단계.
  • 버블링: 이벤트가 자식 요소에서 부모 요소로 올라가는 단계.

 

 

# addEventListener 형식

addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);
element.addEventListener(eventType, eventHandler, useCapture);

 

element.addEventListener('click', handler, true);

handler는 이벤트 핸들러 함수이고, true는 캡처링 단계를 의미합니다.

 

element.addEventListener('click', eventHandler, true); // 캡처링을 활성화
element.addEventListener('click', eventHandler, false); // 버블링을 활성화 (기본값)

 

 

 

예시)

<!DOCTYPE html>
<html>
<head>
    <title> 이벤트 흐름</title>
</head>
<body>
    <div id="container">
        <button id='btn'>확인</button>
    </div>
</body>

 

 

# 함수 작성 유형

<button id="btn">확인</button>

let btn = document.querySelector('#btn');

유형1)
btn.addEventListener('click',function() {
    alert('테스트!');
});


유형2)
function display() {
    alert('테스트!');
}
btn.addEventListener('click',display);

유형3)
const display = () => {
    alert('테스트!');
}
btn.addEventListener('click',display);

 

 

# 이벤트 흐름 

# addEventListener(type, listener, useCapture)의 useCapture  이벤트 흐름

 

이벤트 버블링 : Event bubbling

이벤트 click는 클릭된 요소인 버튼에서 먼저 발생합니다. 

그런 다음 click이벤트는 DOM 트리 위로 이동하여 객체에 도달할 때까지 각 노드에서 실행됩니다

 

순서

  1. button
  2. div with the id container
  3. body
  4. html
  5. document

 

이벤트 버빌링

 

# 이벤트 캡처링 : Event capturing

이벤트 캡처 모델에서 이벤트는 가장 덜 구체적인 요소에서 시작하여 가장 구체적인 요소를 향해 아래쪽으로 흐릅니다.

 

이벤트 캡처

 

  1. document
  2. html
  3. body
  4. div with the id container
  5. button

 

DOM 레벨 2 이벤트 흐름

DOM 레벨 2 이벤트는 이벤트 흐름에 세 단계가 있음을 지정합니다.


첫째, 이벤트 캡처가 발생하며 이는 이벤트를 가로챌 수 있는 기회를 제공합니다.

그런 다음 실제 대상이 이벤트를 수신합니다.

마지막으로 이벤트 버블링이 발생하여 이벤트에 대한 최종 응답이 가능해집니다.

다음 그림은 사용자가 버튼을 클릭할 때 DOM 레벨 2 이벤트 모델을 보여줍니다.

 

dom 레벨2

 

 

# 이벤트 타입

let btn = document.querySelector('#btn');

btn.addEventListener('click', function(event) {
    console.log(event.type);
});

결과 : click 

 

 

# 이벤트 막아주기 

이벤트의 기본 동작을 방지하려면 이 preventDefault() 메서드를 사용합니다.

<a href="https://fullstack-eun.tistory.com/">공부방</a>
let link = document.querySelector('a');

link.addEventListener('click',function(event) {
    console.log('clicked');
    event.preventDefault();
});

이 preventDefault()메서드는 이벤트가 DOM을 버블링 하는 것을 중지하지 않습니다. 

cancelable 그리고 해당 속성이 인 경우 이벤트가 취소될 수 있습니다 

 

 

# 전파 중지 : stopPropagation()

stopPropagation()메서드는 DOM 트리를 통한 이벤트 흐름을 즉시 중지합니다. 

이벤트의 전파를 중지시키는 역할 그러나 브라우저의 기본 동작은 중지되지 않습니다.

let btn = document.querySelector('#btn');

btn.addEventListener('click', function(event) {
    console.log('버튼클릭!');
    event.stopPropagation();
});

document.body.addEventListener('click',function(event) {
    console.log('body 클릭!');
});

 

예

  1. 메뉴 닫기 버튼: 예를 들어, 메뉴에서 클릭 시 메뉴를 닫는 버튼이 있다고 가정해 봅시다. 이때 메뉴의 다른 부분을 클릭하면 메뉴가 닫히도록 설정되어 있을 때, 닫기 버튼을 클릭했을 때 메뉴가 닫히는 이벤트가 다시 상위 메뉴 요소로 전파되지 않도록 막을 수 있습니다.
  2. 폼 전송 막기: 특정 폼에서 제출 버튼을 클릭했을 때, 검증에 실패한 경우 폼이 제출되지 않도록 막기 위해 사용될 수 있습니다.

 

 

 

정리

  • 이벤트는 마우스 클릭과 같이 웹 브라우저에서 발생하는 동작입니다.
  • 이벤트 흐름에는 이벤트 버블링과 이벤트 캡처라는 두 가지 주요 모델이 있습니다.
  • DOM 레벨 2 이벤트는 이벤트 흐름이 이벤트 버블링, 정확한 요소에서 이벤트 발생, 이벤트 캡처의 세 단계로 구성되어 있음을 지정합니다.
  • addEventListener() 이벤트를 이벤트 리스너에 연결하는 이벤트를 등록하는 데 사용, 객체 event는 이벤트 리스너 내에서만 액세스 할 수 있습니다.
  • preventDefault() 이벤트의 기본 동작을 방지하려면 메서드를 사용하지만 이벤트 흐름을 중지하지는 않습니다.
  • 메서드를 사용하여 stopPropagation() DOM 트리를 통한 이벤트 흐름을 중지하지만 브라우저 기본 동작을 취소하지는 않습니다.

 

 

 

 

반응형

'javascript+es6' 카테고리의 다른 글

[ javascript ] 15. className , classList, getComputedStyle  (0) 2023.09.27
[ javascript ] 14. this, target과 currentTarget, dataset, animate  (0) 2023.09.27
[ javascript ] 12. 이벤트 종류와 작성법  (0) 2023.09.24
[ javascript ] 11. DOM 선택, 출력, 속성,탐색  (0) 2023.09.24
[ javascript ] 10. DOM , BOM  (0) 2023.09.20

'javascript+es6'의 다른글

  • 현재글[ javascript ] 13. 이벤트 흐름(버블링과 캡처링) , preventDefault

관련글

티스토리툴바