SeouliteLab

jQuery event.stopPropagation() 메서드 이해하기: 이벤트 전파 중단하기 본문

프로그래밍

jQuery event.stopPropagation() 메서드 이해하기: 이벤트 전파 중단하기

Seoulite Lab 2024. 4. 3. 08:05

event.stopPropagation() 메서드는 jQuery에서 이벤트 핸들러 내에서 호출되었을 때, 현재 이벤트의 전파를 중단시키는 역할을 합니다. 이를 통해 부모 요소로의 이벤트 전파를 막고 현재 요소에서만 이벤트가 처리되도록 할 수 있습니다.

예제 1: 기본 사용법

<!DOCTYPE html>
<html>
<head>
  <title>event.stopPropagation() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("div").on("click", function(event){
        event.stopPropagation();
        alert("클릭 이벤트 발생");
      });
    });
  </script>
</head>
<body>
  <div>
    <button>클릭하세요</button>
  </div>
</body>
</html>

출력 결과: 클릭 이벤트 발생

설명: 이 예제에서는 <div> 요소 안에 <button>이 있습니다. <button>을 클릭하면 부모인 <div>의 클릭 이벤트가 발생하지만, event.stopPropagation() 메서드로 인해 부모 요소로의 이벤트 전파가 중단되어 부모 요소의 클릭 이벤트 핸들러는 실행되지 않습니다.

예제 2: 중첩된 요소에서의 사용

<!DOCTYPE html>
<html>
<head>
  <title>event.stopPropagation() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#inner").on("click", function(event){
        event.stopPropagation();
        alert("내부 요소 클릭");
      });

      $("#outer").on("click", function(){
        alert("외부 요소 클릭");
      });
    });
  </script>
</head>
<body>
  <div id="outer" style="padding: 20px; background-color: #f0f0f0;">
    <div id="inner" style="padding: 10px; background-color: #ccc;">내부 요소</div>
  </div>
</body>
</html>

출력 결과: 내부 요소 클릭

설명: 이 예제에서는 내부 요소와 외부 요소가 중첩되어 있습니다. 내부 요소를 클릭하면 내부 요소의 클릭 이벤트만 발생하고, 외부 요소의 클릭 이벤트는 발생하지 않습니다.

예제 3: 여러 이벤트 타입에서의 사용

<!DOCTYPE html>
<html>
<head>
  <title>event.stopPropagation() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#target").on("click mouseover", function(event){
        event.stopPropagation();
        alert("이벤트 발생");
      });
    });
  </script>
</head>
<body>
  <div id="target" style="width: 100px; height: 100px; background-color: #f0f0f0;"></div>
</body>
</html>

출력 결과: 이벤트 발생

설명: 이 예제에서는 여러 이벤트 유형(click 및 mouseover)에 대해 하나의 핸들러가 등록되어 있습니다. 핸들러에서 event.stopPropagation()을 호출하여 모든 이벤트에 대한 전파를 중단합니다.

예제 4: 이벤트 위임에서의 사용

<!DOCTYPE html>
<html>
<head>
  <title>event.stopPropagation() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#container").on("click", "button", function(event){
        event.stopPropagation();
        alert("버튼 클릭");
      });

      $("#container").on("click", function(){
        alert("컨테이너 클릭");
      });
    });
  </script>
</head>
<body>
  <div id="container">
    <button>버튼</button>
  </div>
</body>
</html>

출력 결과: 버튼 클릭

설명: 이 예제에서는 이벤트 위임을 사용하여 버튼 클릭에 대한 핸들러를 등록했습니다. 버튼을 클릭하면 버튼에 대한 핸들러만 실행되고, 컨테이너의 클릭 핸들러는 실행되지 않습니다.

예제 5: 여러 이벤트 핸들러에서의 사용

<!DOCTYPE html>
<html>
<head>
  <title>event.stopPropagation() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#target").on("click", function(){
        alert("첫 번째 핸들러");
      });

      $("#target").on("click", function(event){
        event.stopPropagation();
        alert("두 번째 핸들러");
      });

      $("#target").on("click", function(){
        alert("세 번째 핸들러");
      });
    });
  </script>
</head>
<body>
  <div id="target" style="width: 100px; height: 100px; background-color: #f0f0f0;"></div>
</body>
</html>

출력 결과: 두 번째 핸들러

설명: 세 개의 이벤트 핸들러가 등록되어 있습니다. 두 번째 핸들러에서 event.stopPropagation()을 호출하여 이후의 핸들러들을 실행하지 않습니다.

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

'프로그래밍' 카테고리의 다른 글

jQuery event.timeStamp 속성 이해하기: 이벤트 발생 시간 파악하기  (0) 2024.04.03
jQuery event.target 속성 이해하기: 이벤트가 발생한 요소 식별하기  (0) 2024.04.03
jQuery event.stopImmediatePropagation() 메서드 이해하기: 이벤트 전파를 즉시 멈추는 방법  (0) 2024.04.03
jQuery 이벤트 객체의 result 속성 활용하기  (0) 2024.04.02
jQuery 이벤트 객체의 relatedTarget 속성 활용하기  (0) 2024.04.02
'프로그래밍' Related Articles more