SeouliteLab

jQuery event.stopImmediatePropagation() 메서드 이해하기: 이벤트 전파를 즉시 멈추는 방법 본문

프로그래밍

jQuery event.stopImmediatePropagation() 메서드 이해하기: 이벤트 전파를 즉시 멈추는 방법

Seoulite Lab 2024. 4. 3. 08:04

event.stopImmediatePropagation() 메서드는 jQuery에서 이벤트 핸들러 내에서 호출되었을 때, 현재 이벤트의 전파를 즉시 멈추는 역할을 합니다. 이를 통해 다른 이벤트 핸들러들이 실행되지 않고 현재 이벤트만 처리할 수 있습니다.

예제 1: 기본 사용법

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

      $("div").on("click", function(){
        alert("두 번째 핸들러 호출됨");
      });
    });
  </script>
</head>
<body>
  <div>클릭하세요</div>
</body>
</html>

출력 결과: 첫 번째 핸들러 호출됨

설명: 이 예제에서는 <div>를 클릭했을 때, 두 개의 이벤트 핸들러가 등록되어 있습니다. 하지만 첫 번째 핸들러에서 event.stopImmediatePropagation() 메서드를 호출하여 전파를 즉시 멈췄기 때문에 두 번째 핸들러는 실행되지 않습니다.

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

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

      $("#inner").on("click", function(event){
        event.stopImmediatePropagation();
        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>

출력 결과: 내부 요소 클릭

설명: 이 예제에서는 외부 요소와 내부 요소가 중첩되어 있습니다. 내부 요소를 클릭하면 내부 요소의 이벤트 핸들러가 실행되지만, event.stopImmediatePropagation() 메서드로 인해 외부 요소의 이벤트 핸들러는 실행되지 않습니다.

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

<!DOCTYPE html>
<html>
<head>
  <title>event.stopImmediatePropagation() 예제</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.stopImmediatePropagation();
        alert("이벤트 발생");
      });
    });
  </script>
</head>
<body>
  <div id="target" style="width: 100px; height: 100px; background-color: #f0f0f0;"></div>
</body>
</html>

출력 결과: 이벤트 발생

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

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

<!DOCTYPE html>
<html>
<head>
  <title>event.stopImmediatePropagation() 예제</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.stopImmediatePropagation();
        alert("버튼 클릭");
      });

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

출력 결과: 버튼 클릭

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

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

<!DOCTYPE html>
<html>
<head>
  <title>event.stopImmediatePropagation() 예제</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.stopImmediatePropagation();
        alert("두 번째 핸들러");
      });

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

출력 결과: 두 번째 핸들러

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

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

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

jQuery event.target 속성 이해하기: 이벤트가 발생한 요소 식별하기  (0) 2024.04.03
jQuery event.stopPropagation() 메서드 이해하기: 이벤트 전파 중단하기  (0) 2024.04.03
jQuery 이벤트 객체의 result 속성 활용하기  (0) 2024.04.02
jQuery 이벤트 객체의 relatedTarget 속성 활용하기  (0) 2024.04.02
jQuery로 이벤트의 기본 동작 막기  (0) 2024.04.02
'프로그래밍' Related Articles more