뭉균의 개발일지

[JavaScript] 현업에서 마주한 이벤트 버블링 본문

JavaScript

[JavaScript] 현업에서 마주한 이벤트 버블링

박뭉균 2025. 3. 5. 23:38

🚪 들어가며 

 

안녕하세요 뭉균입니다! 1월에 신입 프론트엔드 개발자로 취업하여 곧 2달차가 됩니다. 그동안 다양한 업무를 하고 있었고 그 중, 최근에 프로젝트를 진행하며 마주쳤던 이벤트 버블링의 개념에 대해 공유하고자 포스팅하게 되었습니다😎

 

 

 

📚 이벤트 버블링이란? 

 

HTML 요소에서 발생한 이벤트가 해당 요소의 상위 요소(부모, 조상)로 전파되는 현상을 의미합니다.
즉, 특정 요소에서 이벤트가 발생하면, 그 이벤트는 해당 요소에서 먼저 실행된 후 부모 요소, 그 부모의 부모 요소 등으로 전파됩니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 버블링</title>
</head>
<body>
    <div id="parent">
        <button id="child">클릭하세요</button>
    </div>

    <script>
        document.getElementById("parent").addEventListener("click", function() {
            alert("부모 요소 클릭!");
        });

        document.getElementById("child").addEventListener("click", function() {
            alert("자식 요소 클릭!");
        });
    </script>
</body>
</html>

 

 

  • button#child을 클릭하면 "자식 요소 클릭!" 경고창이 뜹니다.
  • 이후 클릭 이벤트가 부모 요소인 div#parent로 전파되어 "부모 요소 클릭!" 경고창이 뜹니다.

 

 

 

🎈 현업에서 마주한 이벤트 버블링

 

선임 개발자분께서 기존의 모달이 켜져있을 때, 모달의 외부를 클릭해도 모달창이 닫히게 설정해달라고 부탁하셔서 저는 다음과 같이 코드를 짰습니다. (아래 코드는 실제 현업에서 사용된 코드가 아니라 제가 단순한 예시로 만들었습니다. 코드는 React로 작성했습니다.)

 

 

import { useState } from "react";
import "./App.css";
import Modal from "./components/Modal";

function App() {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  return (
    <>
      <button onClick={() => setIsOpen(!isOpen)}>모달 오픈</button>
      {isOpen && <Modal onClose={() => setIsOpen(false)} />}
    </>
  );
}

export default App;

 

 

import "./modal.css";

const Modal = ({ onClose }: { onClose: () => void }) => {
  return (
    <div className="overlay" onClick={onClose}>
      <div className="content">
        <button>X</button>
      </div>
    </div>
  );
};

export default Modal;

 

Modal 컴포넌트의 코드와 같이 overlay를 클릭하면 꺼지도록 설정했습니다. 하지만, GIF처럼 content를 클릭해도 모달이 꺼지는 경우가 발생했습니다. 이 경우, 이벤트 버블링이 발생하고 있는 것을 깨닫게 되었습니다. 즉, content에서 클릭 이벤트가 발생하면 부모인 overlay에 이벤트가 전파되어 onClose가 실행되면서 모달이 꺼지는 것이었습니다. 

그렇다면, 어떻게 content를 클릭했을 때는 모달이 종료되지 않게 해줄 수 있을까요?

 

버블링을 막으려면 event.stopPropagation()을 사용하면 됩니다. 

<div className="content" onClick={(e) => e.stopPropagation()}>

 

이렇게 설정해주면서 overlay로의 이벤트 버블링을 막아 모달이 종료되는 현상을 방지할 수 있었습니다.

 

X버튼에 대해서도 따로 onClick을 설정해주지 않아도, 클릭 시 모달창이 닫힙니다. 이것도 이벤트 버블링에 의해 클릭 이벤트가 위로 올라가 overlay로 전달되기 때문입니다.

 

 

📊 마치며

 

이벤트 버블링은 정말 간단한 개념입니다. 하지만, 자바스크립트 문법 외에 개념들을 배울 때, 어떤 곳에서 쓰일수 있을지 고민한 적이 많았습니다. 이런 식으로 직접 만나고 경험하니, 반가운 마음에 포스팅을 했습니다. 앞으로도 현업에서 JS기본 개념을 접할 때마다 정리해서 포스팅할 예정입니다🙂‍↕️

'JavaScript' 카테고리의 다른 글

[JavaScript] 배열을 다루는 다양한 메소드 💽  (1) 2024.10.30
'JavaScript' Related Articles more