SeouliteLab

jQuery .one() 메서드: 이벤트 핸들러 단 한 번만 실행하기 본문

프로그래밍

jQuery .one() 메서드: 이벤트 핸들러 단 한 번만 실행하기

Seoulite Lab 2024. 4. 4. 09:05

예제 1: 클릭 이벤트 핸들러 단 한 번만 실행하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .one() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").one("click", function(){
        alert("버튼이 클릭되었습니다. 이벤트 핸들러는 단 한 번만 실행됩니다.");
      });
    });
  </script>
</head>
<body>
  <button>클릭하세요</button>
</body>
</html>

설명: 이 예제에서는 버튼을 클릭할 때마다 경고 메시지가 한 번만 표시되도록 클릭 이벤트 핸들러를 등록합니다.

예제 2: 여러 이벤트에 대해 각각 단 한 번만 실행하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .one() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").one({
        mouseenter: function(){
          $(this).text("마우스가 들어왔습니다. 이벤트 핸들러는 단 한 번만 실행됩니다.");
        },
        click: function(){
          $(this).text("클릭되었습니다. 이벤트 핸들러는 단 한 번만 실행됩니다.");
        }
      });
    });
  </script>
</head>
<body>
  <button>버튼</button>
</body>
</html>

설명: 이 예제에서는 mouseenter 이벤트와 click 이벤트에 대해 각각 다른 동작을 수행하는 핸들러를 등록하고, 각 이벤트 핸들러가 단 한 번만 실행되도록 설정합니다.

예제 3: 동적으로 생성된 요소에 이벤트 핸들러 단 한 번만 실행하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .one() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("body").one("click", "button", function(){
        alert("버튼이 클릭되었습니다. 이벤트 핸들러는 단 한 번만 실행됩니다.");
      });

      $("#addButton").click(function(){
        $("body").append("<button>새로운 버튼</button>");
      });
    });
  </script>
</head>
<body>
  <button>클릭하세요</button>
  <button id="addButton">새로운 버튼 추가</button>
</body>
</html>

설명: 이 예제에서는 동적으로 생성된 버튼에도 클릭 이벤트 핸들러를 등록하고, 각 버튼당 이벤트 핸들러가 단 한 번만 실행되도록 설정합니다.

예제 4: 이벤트 핸들러가 한 번만 실행된 후 제거하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .one() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      function clickHandler() {
        alert("이벤트 핸들러가 한 번 실행되었습니다. 이후 제거됩니다.");
        $(this).off("click", clickHandler);
      }

      $("button").one("click", clickHandler);
    });
  </script>
</head>
<body>
  <button>클릭하세요</button>
</body>
</html>

설명: 이 예제에서는 이벤트 핸들러가 한 번 실행된 후 자동으로 제거되는 방법을 보여줍니다.

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

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

jQuery .select() 메서드: 요소 선택과 관련된 기능  (0) 2024.04.04
jQuery .resize() 메서드: 화면 크기 변화 감지하기  (0) 2024.04.04
jQuery .on() 메서드: 이벤트 핸들러 등록을 위한 메서드  (0) 2024.04.04
jQuery .off() 메서드: 이벤트 해제를 위한 메서드  (0) 2024.04.04
jQuery .mouseup() 메서드: 마우스 버튼을 놓을 때 발생하는 이벤트  (0) 2024.04.04
'프로그래밍' Related Articles more