SeouliteLab

jQuery event.namespace 속성을 활용한 이벤트 네임스페이스 관리 본문

프로그래밍

jQuery event.namespace 속성을 활용한 이벤트 네임스페이스 관리

Seoulite Lab 2024. 4. 2. 13:28

이벤트 네임스페이스는 jQuery에서 이벤트를 구분하기 위한 기술로, 동일한 이벤트 유형에 대해 다양한 핸들러를 구분하여 관리할 수 있습니다. jQuery의 event.namespace 속성을 활용하면 이러한 이벤트 네임스페이스를 효과적으로 활용할 수 있습니다.

예제 1: 이벤트 네임스페이스 지정

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.namespace 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#button1').on('click.myNamespace', function(){
        $('#result1').text('첫 번째 버튼 클릭');
      });
      $('#button2').on('click.myNamespace', function(){
        $('#result1').text('두 번째 버튼 클릭');
      });
    });
  </script>
</head>
<body>

<button id="button1">첫 번째 버튼</button>
<button id="button2">두 번째 버튼</button>
<p id="result1"></p>

</body>
</html>

결과:

  • 각 버튼을 클릭하면 해당 버튼에 대한 메시지가 표시됩니다.

설명:
이 예제에서는 각 버튼에 대해 click 이벤트 핸들러를 등록하고, 이벤트 네임스페이스를 지정하여 핸들러를 구분합니다. 이벤트가 발생할 때 해당 네임스페이스에 속한 핸들러만 실행되며, 다른 네임스페이스에 속한 핸들러는 영향을 받지 않습니다.

예제 2: 이벤트 네임스페이스 제거

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.namespace 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#button1').on('click.myNamespace', function(){
        $('#result2').text('첫 번째 버튼 클릭');
      });
      $('#button1').off('click.myNamespace');
    });
  </script>
</head>
<body>

<button id="button1">첫 번째 버튼</button>
<p id="result2"></p>

</body>
</html>

결과:

  • 버튼을 클릭해도 아무런 동작이 발생하지 않습니다.

설명:
이 예제에서는 버튼에 등록된 click 이벤트 핸들러를 off 메소드를 사용하여 제거합니다. 이렇게 하면 해당 네임스페이스에 속한 이벤트 핸들러가 제거되어 해당 이벤트에 대한 반응이 없어집니다.

예제 3: 여러 이벤트 네임스페이스 사용

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.namespace 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#button1').on('click.namespace1', function(){
        $('#result3').text('첫 번째 버튼 클릭');
      });
      $('#button1').on('click.namespace2', function(){
        $('#result3').text('두 번째 버튼 클릭');
      });
    });
  </script>
</head>
<body>

<button id="button1">첫 번째 버튼</button>
<p id="result3"></p>

</body>
</html>

결과:

  • 버튼을 클릭하면 마지막에 등록된 핸들러에 의해 표시된 메시지가 표시됩니다.

설명:
이 예제에서는 동일한 이벤트 유형에 대해

여러 개의 네임스페이스를 사용하여 다수의 핸들러를 등록합니다. 이때 이벤트가 발생하면 가장 마지막에 등록된 핸들러에 의해 동작이 결정됩니다.

예제 4: 다수의 이벤트 타입과 네임스페이스 사용

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.namespace 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#button1').on('click.namespace1 mouseover.namespace1', function(){
        $('#result4').text('버튼 클릭 또는 마우스 오버');
      });
    });
  </script>
</head>
<body>

<button id="button1">버튼</button>
<p id="result4"></p>

</body>
</html>

결과:

  • 버튼을 클릭하거나 마우스를 올리면 동일한 메시지가 표시됩니다.

설명:
이 예제에서는 동일한 요소에 대해 여러 이벤트 유형과 네임스페이스를 동시에 사용하여 핸들러를 등록합니다. 이벤트가 발생하면 각 이벤트 유형과 네임스페이스에 해당하는 핸들러가 모두 실행됩니다.

예제 5: 다양한 이벤트 타입 및 네임스페이스 조합

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.namespace 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#button1').on({
        'click.namespace1': function(){
          $('#result5').text('클릭 이벤트 발생');
        },
        'mouseover.namespace2': function(){
          $('#result5').text('마우스 오버 이벤트 발생');
        }
      });
    });
  </script>
</head>
<body>

<button id="button1">버튼</button>
<p id="result5"></p>

</body>
</html>

결과:

  • 버튼을 클릭하거나 마우스를 올리면 각각 다른 메시지가 표시됩니다.

이 예제에서는 하나의 요소에 대해 다양한 이벤트 유형과 네임스페이스를 조합하여 핸들러를 등록합니다. 이벤트가 발생하면 해당 이벤트 유형과 네임스페이스에 해당하는 핸들러가 실행됩니다.

jQuery의 event.namespace 속성을 활용하면 이벤트를 효율적으로 관리하고 구분할 수 있습니다. 이를 통해 다양한 상황에서 유연하게 이벤트를 처리할 수 있습니다.

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

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

jQuery로 마우스 이벤트의 수직 위치 파악하기  (0) 2024.04.02
jQuery event.pageX 속성을 활용한 마우스 이벤트 처리  (0) 2024.04.02
jQuery event.metaKey 속성을 활용한 메타키 확인  (0) 2024.04.02
jQuery event.isPropagationStopped() 메소드를 활용한 이벤트 전파 중단 확인  (0) 2024.04.02
jQuery event.isImmediatePropagationStopped() 메소드를 활용한 즉시 이벤트 전파 중단 확인  (0) 2024.04.02
'프로그래밍' Related Articles more