SeouliteLab

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

프로그래밍

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

Seoulite Lab 2024. 4. 2. 08:38

제어문을 사용하여 이벤트 전파가 중단되었는지 확인하는 것은 웹 개발에서 중요한 부분입니다. jQuery의 event.isPropagationStopped() 메소드를 사용하면 이러한 상황을 간편하게 처리할 수 있습니다.

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

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.isPropagationStopped() 예제</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.isPropagationStopped()) {
          $('#result1').text('이벤트 전파가 중단되었습니다.');
        } else {
          $('#result1').text('이벤트 전파가 중단되지 않았습니다.');
        }
      });
      $('#inner').click(function(event){
        alert('inner 클릭 이벤트 발생');
        event.stopPropagation(); // 이벤트 전파 중단
      });
    });
  </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.isPropagationStopped() 예제</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.isPropagationStopped()) {
          $('#result2').text('이벤트 전파가 중단되었습니다.');
        } else {
          $('#result2').text('이벤트 전파가 중단되지 않았습니다.');
        }
      });
      $('#middle').click(function(event){
        alert('middle 클릭 이벤트 발생');
      });
      $('#inner').click(function(event){
        alert('inner 클릭 이벤트 발생');
        event.stopPropagation(); // 이벤트 전파 중단
      });
    });
  </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.isPropagationStopped() 예제</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.isPropagationStopped()) {
          $('#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.isPropagationStopped() 예제</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.isPropagationStopped()) {
          $('#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.isPropagationStopped() 예제</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.stopPropagation(); // 이벤트 전파 중단
      });
      $('#outer').click(function(event){
        alert('outer 클릭 이벤트 발생');
        if (event.isPropagationStopped()) {
          $('#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.isPropagationStopped() 메소드를 사용하면 이벤트가 전파되었는지 여부를 확인할 수 있습니다. 이를 통해 이벤트 전파를 제어하고 상황에 맞게 처리할 수 있습니다.

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

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

jQuery event.namespace 속성을 활용한 이벤트 네임스페이스 관리  (0) 2024.04.02
jQuery event.metaKey 속성을 활용한 메타키 확인  (0) 2024.04.02
jQuery event.isImmediatePropagationStopped() 메소드를 활용한 즉시 이벤트 전파 중단 확인  (0) 2024.04.02
jQuery event.isDefaultPrevented() 메소드를 활용한 기본 이벤트 방지 확인  (0) 2024.04.02
jQuery .error() 메소드를 활용한 오류 처리  (0) 2024.04.02
'프로그래밍' Related Articles more