SeouliteLab

jQuery event.isImmediatePropagationStopped() 메소드를 활용한 즉시 이벤트 전파 중단 확인 본문

프로그래밍

jQuery event.isImmediatePropagationStopped() 메소드를 활용한 즉시 이벤트 전파 중단 확인

Seoulite Lab 2024. 4. 2. 08:36

이번에는 jQuery의 event.isImmediatePropagationStopped() 메소드에 대해 알아보겠습니다. 이 메소드를 사용하면 이벤트의 즉시 전파가 중단되었는지 여부를 확인할 수 있습니다.

예제 1: 클릭 이벤트 즉시 전파 중단 확인

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.isImmediatePropagationStopped() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#outer').click(function(event){
        alert('outer 클릭 이벤트 발생');
        if (event.isImmediatePropagationStopped()) {
          $('#result1').text('이벤트 전파가 중단되었습니다.');
        } else {
          $('#result1').text('이벤트 전파가 중단되지 않았습니다.');
        }
      });
      $('#inner').click(function(event){
        alert('inner 클릭 이벤트 발생');
        event.stopImmediatePropagation(); // 즉시 전파 중단
      });
    });
  </script>
</head>
<body>

<div id="outer">
  <div id="inner">내부 요소</div>
</div>
<p id="result1"></p>

</body>
</html>

결과:

  • 내부 요소를 클릭하면 "inner 클릭 이벤트 발생"이 표시됩니다.
  • 그 후 "이벤트 전파가 중단되었습니다."가 표시됩니다.

설명:
이 예제에서는 외부 요소와 내부 요소에 각각 클릭 이벤트를 등록합니다. 내부 요소를 클릭하면 내부 요소의 클릭 이벤트 핸들러가 먼저 실행되고, 이벤트 전파가 즉시 중단됩니다. 따라서 외부 요소의 클릭 이벤트 핸들러에서는 이를 확인하고 메시지를 표시합니다.

예제 2: 이벤트 핸들러 체인에서 중단 여부 확인

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.isImmediatePropagationStopped() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#outer').click(function(event){
        alert('outer 클릭 이벤트 발생');
        if (event.isImmediatePropagationStopped()) {
          $('#result2').text('이벤트 전파가 중단되었습니다.');
        } else {
          $('#result2').text('이벤트 전파가 중단되지 않았습니다.');
        }
      });
      $('#middle').click(function(event){
        alert('middle 클릭 이벤트 발생');
      });
      $('#inner').click(function(event){
        alert('inner 클릭 이벤트 발생');
        event.stopImmediatePropagation(); // 즉시 전파 중단
      });
    });
  </script>
</head>
<body>

<div id="outer">
  <div id="middle">
    <div id="inner">내부 요소</div>
  </div>
</div>
<p id="result2"></p>

</body>
</html>

결과:

  • 내부 요소를 클릭하면 "inner 클릭 이벤트 발생"이 표시됩니다.
  • 그 후 "이벤트 전파가 중단되었습니다."가 표시됩니다.

설명:
이 예제에서는 중첩된 요소에 각각 클릭 이벤트를 등록합니다. 내부 요소를 클릭하면 내부 요소의 클릭 이벤트 핸들러가 먼저 실행되고, 이벤트 전파가 즉시 중단됩니다. 따라서 외부 요소와 중간 요소의 클릭 이벤트 핸들러는 실행되지 않습니다.

예제 3: 이벤트 핸들러 체인에서 중단되지 않은 경우

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.isImmediatePropagationStopped() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#outer').click(function(event){
        alert('outer 클릭 이벤트 발생');
        if (event.isImmediatePropagationStopped()) {
          $('#result3').text('이벤트 전파가 중단되었습니다.');
        } else {
          $('#result3').text('이벤트 전파가 중단되지 않았습니다.');
        }
      });
      $('#middle').click(function(event){
        alert('middle 클릭 이벤트 발생');
      });
      $('#inner').click(function(event){
        alert('inner 클릭 이벤트 발생');
      });
    });
  </script>
</head>
<body>

<div id="outer">
  <div id="middle">
    <div id="inner">내부 요소</div>
  </div>
</div>
<p id="result3"></p>

</body>
</html>

결과:

  • 내부 요소를 클릭하면 "inner 클릭 이벤트 발생"이 표시됩니다.
  • 그 후 "이벤트 전파가 중단되지 않았습니다."가 표시됩니다.

설명:
이 예제에서는 중첩된 요소에 각각 클릭 이벤트를 등록합니다. 내부 요소를 클릭하면 내부 요소의 클릭 이벤트 핸들러가 실행됩니다. 그러나 이벤트 전파가 중단되지 않았기 때문에 외부 요소와 중간 요소의 클릭 이벤트 핸들러도 실행됩니다.

예제 4: 이벤트 핸들러가 없는 경우

<!DOCTYPE html>
<html>
<head>
  <title>

jQuery event.isImmediatePropagationStopped() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#outer').click(function(event){
        alert('outer 클릭 이벤트 발생');
        if (event.isImmediatePropagationStopped()) {
          $('#result4').text('이벤트 전파가 중단되었습니다.');
        } else {
          $('#result4').text('이벤트 전파가 중단되지 않았습니다.');
        }
      });
    });
  </script>
</head>
<body>

<div id="outer">외부 요소</div>
<p id="result4"></p>

</body>
</html>

결과:

  • 외부 요소를 클릭하면 "outer 클릭 이벤트 발생"이 표시됩니다.
  • 그 후 "이벤트 전파가 중단되지 않았습니다."가 표시됩니다.

설명:
이 예제에서는 외부 요소에 클릭 이벤트만 등록되어 있습니다. 따라서 내부 요소가 없어 중단된 이벤트가 없으므로 "이벤트 전파가 중단되지 않았습니다." 메시지가 표시됩니다.

예제 5: 이벤트 핸들러가 동적으로 추가된 경우

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.isImmediatePropagationStopped() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#outer').on('click', '#inner', function(event){
        alert('inner 클릭 이벤트 발생');
        event.stopImmediatePropagation(); // 즉시 전파 중단
      });
      $('#outer').click(function(event){
        alert('outer 클릭 이벤트 발생');
        if (event.isImmediatePropagationStopped()) {
          $('#result5').text('이벤트 전파가 중단되었습니다.');
        } else {
          $('#result5').text('이벤트 전파가 중단되지 않았습니다.');
        }
      });
    });
  </script>
</head>
<body>

<div id="outer">
  <div id="inner">내부 요소</div>
</div>
<p id="result5"></p>

</body>
</html>

결과:

  • 내부 요소를 클릭하면 "inner 클릭 이벤트 발생"이 표시됩니다.
  • 그 후 "이벤트 전파가 중단되었습니다."가 표시됩니다.

설명:
이 예제에서는 외부 요소에 대한 클릭 이벤트를 처리하는 핸들러와 내부 요소에 대한 클릭 이벤트를 처리하는 핸들러가 등록되어 있습니다. 내부 요소를 클릭하면 내부 요소의 클릭 이벤트 핸들러가 먼저 실행되고, 이벤트 전파가 즉시 중단됩니다. 따라서 외부 요소의 클릭 이벤트 핸들러는 실행되지 않습니다.

jQuery의 event.isImmediatePropagationStopped() 메소드를 사용하면 이벤트가 즉시 전파가 중단되었는지 여부를 확인할 수 있습니다. 이를 통해 이벤트의 전파를 제어하고 상황에 맞게 처리할 수 있습니다.

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

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

jQuery event.metaKey 속성을 활용한 메타키 확인  (0) 2024.04.02
jQuery event.isPropagationStopped() 메소드를 활용한 이벤트 전파 중단 확인  (0) 2024.04.02
jQuery event.isDefaultPrevented() 메소드를 활용한 기본 이벤트 방지 확인  (0) 2024.04.02
jQuery .error() 메소드를 활용한 오류 처리  (0) 2024.04.02
이벤트 해제를 위한 jQuery .die() 메소드  (0) 2024.04.02
'프로그래밍' Related Articles more