[JQuery] 4장 JQuery 이벤트 처리

1. jQuery 기본 설정

JQuery를 사용한 이벤트 처리는 웹 페이지에서 사용자 상호작용을 다루는 데 매우 유용하며, 다양한 이벤트를 쉽게 처리할 수 있는 메서드를 제공합니다. 먼저 jQuery를 페이지에 포함해야 합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JQuery Event Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../version/jquery-3.7.1.min.js" />
  </head>
  <body>
    <button id="myButton">클릭하세요</button>
    <p id="myParagraph">이곳에 텍스트가 표시됨</p>

    <script>
        // JQuery 코드가 여기에 들어감
    </script>
  </body>
</html>

2. 클릭 이벤트 처리

버튼 클릭 시 텍스트를 변경하는 예제입니다.

<script>
      // JQuery 코드가 여기에 들어감
      $(document).ready(function () {
        $("#myButton").click(function () {
          $("#myParagraph").text("버튼이 클릭되었음");
        });
      });
</script>

3. 마우스 이벤트 처리

마우스 오버 및 마우스 아웃 이벤트를 처리합니다.

$(document).ready(function () {
    $("#myButton").mouseover(function () {
          $(this).css("background-color", "yellow");
      })
      .mouseout(function () {
         $(this).css("background-color", "");
     });
});

4. 입력 이벤트 처리

입력 필드의 값이 변경될 때 이벤트를 처리하는 예제입니다.

<p id="myParagraph">이곳에 텍스트가 표시됨</p>

<script>
    $(document).ready(function () {
      $("#myInput").on("input", function () {
        $("#myParagraph").text("입력한 텍스트: " + $(this).val());
      });
    });
</script>

5. 여러 이벤트 처리

여러 이벤트를 한 번에 처리하는 방법입니다.

$(document).ready(function () {
   $("#myButton").on("click mouseover", function () {
       $("#myParagraph").text("버튼이 클릭되었거나 마우스가 오버됨");
   });
});

6. 이벤트 제거

이벤트를 제거하는 방법입니다.

$(document).ready(function () {
      const myFunction = function () {
        $("#myParagraph").text("Event가 발생했습니다");
      };

      $("#myButton").click(myFunction);

      // 이벤트 제거
      $("#myButton").off("click", myFunction);
});

GitHub - jQuicker/jQuery-bloging

Contribute to jQuicker/jQuery-bloging development by creating an account on GitHub.

github.com

LIST

'Back-End > JQuery' 카테고리의 다른 글

[JQuery] 5장 애니메이션 (0)	2025.03.18
[JQuery] 3장 JQuery DOM 조작 (0)	2025.02.27
[JQuery] 2장 JQuery 기본 문법 (0)	2025.02.24
[JQuery] 1장 JQuery는 무엇인가? Jquery세팅법 (1)	2025.02.16