dom

김내현·2024년 11월 7일

개인공부

목록 보기

17/51

DOM에서의 이벤트 버블링(Event Bubbling) 현상의 주요 특징:

정의: 이벤트 버블링은 특정 요소에서 이벤트가 발생했을 때, 그 이벤트가 상위 요소들로 전파되는 현상을 말한다.
동작 방식:

가장 하위의 자식 요소에서 이벤트가 발생하면, 그 이벤트는 부모 요소로 전달.
이벤트는 계속해서 상위 요소로 전달되어 최종적으로 document 객체까지 도달.

순서: 가장 구체적인(깊은) 요소에서 시작하여 덜 구체적인(얕은) 요소로 이벤트가 전파.
활용: 이벤트 위임(Event Delegation) 패턴을 구현할 때 주로 사용.
여러 자식 요소에 대한 이벤트를 부모 요소 하나에서 처리할 수 있게 해준다.
제어: event.stopPropagation() 메서드를 사용하여 이벤트 버블링을 중단시킬 수 있다.
기본 동작: 대부분의 이벤트는 기본적으로 버블링된다. 단, focus 같은 일부 이벤트는 버블링되지 않는다.

이벤트 버블링은 DOM 이벤트 처리의 핵심 개념 중 하나로, 효율적인 이벤트 핸들링을 가능하게 한다.

이벤트 버블링에 대한 자세한 설명.

이벤트 버블링은 DOM(Document Object Model) 구조에서 발생하는 이벤트 전파 방식 중 하나. 이 개념을 이해하기 위해서는 먼저 DOM 트리 구조를 이해해야 한다.

DOM 트리 구조:
HTML 문서는 트리 구조로 표현됩니다. 각 요소는 노드이며, 부모-자식 관계를 가진다.

예를 들어:
```
<div id="grandparent">
  <div id="parent">
    <button id="child">클릭</button>
  </div>
</div>
```
이벤트 버블링 과정:

사용자가 버튼("child")을 클릭.
이벤트는 먼저 버튼에서 발생한다.
그 다음, 이벤트는 부모 요소("parent")로 '버블링'된다.
마지막으로, 이벤트는 조부모 요소("grandparent")로 계속 버블링된.
이 과정은 document 루트까지 계속된다.

시각적 표현:
이벤트 버블링을 물속의 거품이 위로 올라가는 것처럼 생각할 수 있습니다.
이벤트 버블링 및 캡처링 이미지

코드 예제:

document.getElementById("child").addEventListener("click", function() {
  console.log("버튼 클릭됨");
});

document.getElementById("parent").addEventListener("click", function() {
  console.log("부모 div 클릭됨");
});

document.getElementById("grandparent").addEventListener("click", function() {
  console.log("조부모 div 클릭됨");
});

버튼을 클릭하면 콘솔에 다음과 같이 출력:

버튼 클릭됨
부모 div 클릭됨
조부모 div 클릭됨

이벤트 버블링 제어:

event.stopPropagation(): 이벤트 전파를 중지.

아래는 이벤트 버블링을 제어하는 예제 코드로,event.currentTarget을 사용하는 방법. 이 예제에서는 자식 요소를 클릭할 때 부모와 조부모 요소로의 이벤트 전파를 중지하는 기능을 추가.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title>이벤트 버블링 예제</title>
    <style>
        div {
            padding: 20px;
            margin: 10px;
        }
        #grandparent {
            border: 3px solid red;
            background-color: #ffcccb;
        }
        #parent {
            border: 3px solid green;
            background-color: #90ee90;
        }
        #child {
            border: 3px solid blue;
            background-color: #add8e6;
        }
    </style>
</head>
<body>
    <div id="grandparent">
        조부모
        <div id="parent">
            부모
            <div id="child">자식</div>
        </div>
    </div>

    <script>
        document.getElementById("child").addEventListener("click", function (e) {
            console.log("자식 클릭됨");
            alert("자식 클릭됨");

            // 이벤트 전파 중지
            e.stopPropagation();
        });

        document.getElementById("parent").addEventListener("click", function (e) {
            console.log("부모 클릭됨");
            alert("부모 클릭됨");
        });

        document.getElementById("grandparent").addEventListener("click", function (e) {
            console.log("조부모 클릭됨");
            alert("조부모 클릭됨");
        });
    </script>
</body>
</html>
동작 방식:
자식 요소를 클릭하면 "자식 클릭됨"이라는 알림이 표시되고, 콘솔에 해당 메시지가 출력.
`stopPropagation()`으로 인해 부모와 조부모 요소의 클릭 이벤트는 발생하지 않으므로,
"부모 클릭됨" 및 "조부모 클릭됨" 메시지는 출력되지 않는다.

event.target vs event.currentTarget: 실제 이벤트가 발생한 요소와 현재 이벤트 핸들러가 attached된 요소를 구분할 수 있다.
event.target과 event.currentTarget의 차이를 이해하는 것은 JavaScript에서 이벤트 처리를 효과적으로 사용하는 데 매우 중요하다.

`event.target`과 `event.currentTarget`의 차이

event.target:

정의: 이벤트가 실제로 발생한 요소를 가리킨다. 예를 들어, 사용자가 버튼을 클릭하면 event.target은 해당 버튼을 가리킨다.
사용 예: 클릭된 요소에 대한 정보를 얻고 싶을 때 사용.

event.currentTarget:

정의: 현재 이벤트 핸들러가 연결된 요소 가리킨다. 즉, 이벤트가 처리되고 있는 요소.
사용 예: 이벤트 핸들러가 등록된 요소에 대한 정보를 얻고 싶을 때 사용.

예제 코드

아래는 event.target과 event.currentTarget을 사용하는 간단한 HTML 및 JavaScript 코드:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title>event.target vs event.currentTarget</title>
    <style>
        #parent {
            padding: 20px;
            background-color: #90ee90;
            border: 2px solid green;
        }
        #child {
            padding: 10px;
            background-color: #add8e6;
            border: 2px solid blue;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="parent">
        부모 요소 (클릭하세요)
        <div id="child">자식 요소 (클릭하세요)</div>
    </div>

    <script>
        document.getElementById("parent").addEventListener("click", function(e) {
            console.log("현재 이벤트 핸들러가 등록된 요소:", e.currentTarget); // 부모 요소
            console.log("이벤트가 발생한 요소:", e.target); // 클릭된 요소
        });

        document.getElementById("child").addEventListener("click", function(e) {
            console.log("자식 클릭됨");
            alert("자식 클릭됨");
        });
    </script>
</body>
</html>
동작 방식
자식 요소(`child`)를 클릭하면:
콘솔에 "현재 이벤트 핸들러가 등록된 요소:"로 부모 요소가 출력 (`e.currentTarget`).
"이벤트가 발생한 요소:"로 자식 요소가 출력 (`e.target`).
  
부모 요소(`parent`)를 직접 클릭하면:
"현재 이벤트 핸들러가 등록된 요소:"로 부모 요소가 출력(`e.currentTarget`).
 "이벤트가 발생한 요소:"로 부모 요소도 출력 (`e.target`).

이벤트 캡처링:
버블링의 반대 방향으로 진행되는 이벤트 전파 방식. 루트에서 시작하여 타겟 요소까지 내려간다.
실제 응용:
- 이벤트 위임(Event Delegation): 부모 요소에 이벤트 리스너를 추가하여 여러 자식 요소의 이벤트를 효율적으로 관리할 수 있다.

이벤트 버블링은 복잡해 보일 수 있지만, 이를 이해하고 활용하면 효율적인 이벤트 핸들링이 가능. 특히 대규모 애플리케이션에서 성능 최적화에 도움이 된다.

HTML 요소들을 시각적으로 구분하면 이벤트 버블링을 더 쉽게 이해할 수 있다. 아래에 색상과 테두리를 추가한 예제 제시.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>이벤트 버블링 예제</title>
    <style>
        div {
            padding: 20px;
            margin: 10px;
        }
        #grandparent {
            border: 3px solid red;
            background-color: #ffcccb;
        }
        #parent {
            border: 3px solid green;
            background-color: #90ee90;
        }
        #child {
            border: 3px solid blue;
            background-color: #add8e6;
        }
    </style>
</head>
<body>
    <div id="grandparent">
        조부모
        <div id="parent">
            부모
            <div id="child">자식</div>
        </div>
    </div>

    <script>
        document.getElementById("child").addEventListener("click", function(e) {
            console.log("자식 클릭됨");
            alert("자식 클릭됨");
        });

        document.getElementById("parent").addEventListener("click", function(e) {
            console.log("부모 클릭됨");
            alert("부모 클릭됨");
        });

        document.getElementById("grandparent").addEventListener("click", function(e) {
            console.log("조부모 클릭됨");
            alert("조부모 클릭됨");
        });
    </script>
</body>
</html>

이 코드를 실행하면:

자식 요소를 클릭할 때, 이벤트가 자식에서 시작하여 부모, 조부모 순으로 버블링되는 것을 볼 수 있다.
각 단계에서 알림창이 표시되어 이벤트의 전파 순서를 명확히 확인할 수 있다.

이렇게 시각적으로 구분된 요소들을 통해 이벤트 버블링의 개념을 더 쉽게 이해할 수 있다. 자식 요소를 클릭하면 그 이벤트가 어떻게 상위 요소로 전파되는지 직접 확인할 수 있다.

이벤트 버블링에 대한 이미지를 찾기 위해 제공된 검색 결과를 살펴보면, 이미지가 포함된 링크는 명시되어 있지 않습니다. 대신, 이벤트 버블링을 설명하는 내용을 포함하고 있는 여러 링크가 있습니다. 아래는 이벤트 버블링에 대한 설명과 이미지가 포함된 링크를 정리한 것입니다:

이벤트 버블링 개념:
- 이벤트 버블링은 특정 요소에서 이벤트가 발생했을 때, 해당 이벤트가 상위 요소로 전파되는 현상입니다. 사용자가 버튼을 클릭하면, 그 이벤트는 버튼에서 시작하여 부모 요소로 올라가고, 최종적으로 document 객체까지 도달합니다.
기타 유용한 링크: