SeouliteLab

jQuery .on() 메서드: 이벤트 핸들러 등록을 위한 메서드 본문

프로그래밍

jQuery .on() 메서드: 이벤트 핸들러 등록을 위한 메서드

Seoulite Lab 2024. 4. 4. 09:05

예제 1: 클릭 이벤트 핸들러 등록하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .on() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").on("click", function(){
        alert("버튼이 클릭되었습니다.");
      });
    });
  </script>
</head>
<body>
  <button>클릭하세요</button>
</body>
</html>

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

예제 2: 동적으로 생성된 요소에 이벤트 핸들러 등록하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .on() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("body").on("click", "button", function(){
        alert("버튼이 클릭되었습니다.");
      });

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

설명: 이 예제에서는 동적으로 생성된 버튼에도 클릭 이벤트 핸들러를 등록합니다. 이벤트는 body 요소를 기준으로 위임됩니다.

예제 3: 여러 이벤트에 대한 핸들러 등록하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .on() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").on({
        mouseenter: function(){
          $(this).text("마우스가 들어왔습니다.");
        },
        mouseleave: function(){
          $(this).text("마우스가 나갔습니다.");
        },
        click: function(){
          $(this).text("클릭되었습니다.");
        }
      });
    });
  </script>
</head>
<body>
  <button>버튼</button>
</body>
</html>

설명: 이 예제에서는 mouseenter, mouseleave, click 이벤트에 대해 각각 다른 동작을 수행하는 핸들러를 등록합니다.

예제 4: 이벤트 네임스페이스 사용하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .on() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").on("click.myNamespace", function(){
        alert("버튼이 클릭되었습니다.");
      });

      $("#removeButton").click(function(){
        $("button").off(".myNamespace");
        alert("이벤트 네임스페이스가 myNamespace인 모든 이벤트 핸들러가 제거되었습니다.");
      });
    });
  </script>
</head>
<body>
  <button>클릭하세요</button>
  <button id="removeButton">이벤트 제거</button>
</body>
</html>

설명: 이 예제에서는 이벤트의 네임스페이스를 사용하여 해당 네임스페이스에 속한 이벤트 핸들러만 제거하는 방법을 보여줍니다.

예제 5: 한 번만 실행되는 핸들러 등록하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .on() 메서드 예제</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").on("click", clickHandler);
    });
  </script>
</head>
<body>
  <button>클릭하세요</button>
</body>
</html>

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

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

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

jQuery .resize() 메서드: 화면 크기 변화 감지하기  (0) 2024.04.04
jQuery .one() 메서드: 이벤트 핸들러 단 한 번만 실행하기  (0) 2024.04.04
jQuery .off() 메서드: 이벤트 해제를 위한 메서드  (0) 2024.04.04
jQuery .mouseup() 메서드: 마우스 버튼을 놓을 때 발생하는 이벤트  (0) 2024.04.04
jQuery .mouseover() 메서드: 요소에 마우스를 올렸을 때 발생하는 이벤트  (0) 2024.04.04
'프로그래밍' Related Articles more