jQuery는 HTML 페이지의 이벤트에 응답하도록 맞춤 제작되었습니다.

웹 페이지가 응답할 수 있는 다양한 방문자들이 하는 모든 행동(actions)을 이벤트라고 합니다.

이벤트는 어떤 일이 발생하는 정확한 순간을 나타냅니다.
예제:

• 요소 위로 마우스 이동
• 라디오 버튼 선택
• 요소 클릭

“fires / fired”라는 용어는 종종 이벤트와 함께 사용됩니다. 예 : “키 누르기 이벤트는 키를 누르는 순간 시작됩니다.”

다음은 몇 가지 일반적인 DOM 이벤트입니다.

jQuery에서, 대부분의 DOM 이벤트에는 동일한 jQuery 메서드가 있습니다.

페이지의 모든 단락에 클릭 이벤트를 지정하려면, 다음을 수행하십시오.

$("p").click();

다음 단계는 이벤트가 발생할 때 어떤 일이 발생해야 하는지 정의하는 것입니다.
이벤트에 함수를 전달해야 합니다.

$("p").click(function() {
  // action goes here!!
});

$(document).ready() 메서드를 사용하면 문서가 완전히 로딩되었을 때, 함수를 실행할 수 있습니다.
이 이벤트는 jQuery Syntax 챕터에서 이미 설명되어 있습니다.

click() 메서드는 이벤트 핸들러 함수를 HTML 요소에 연결합니다.

사용자가 HTML 요소를 클릭하면, 함수가 실행됩니다.

다음 예제는 다음과 같습니다: 클릭 이벤트가 <p> 요소에서 발생하는 경우; 현재 <p> 요소를 숨깁니다.

    $(document).ready(function () {
      $("p").click(function () {
        $(this).hide();
      });
    });

dblclick() 메서드는 이벤트 핸들러 함수를 HTML 요소에 연결합니다.

이 함수는 사용자가 HTML 요소를 더블 클릭하면 실행됩니다.

    $(document).ready(function () {
      $("p").dblclick(function () {
        $(this).hide();
      });
    });

mouseenter() 메서드는 이벤트 핸들러 함수를 HTML 요소에 연결합니다.

이 함수는 마우스 포인터가 HTML 요소에 들어갈 때 실행됩니다.

    $(document).ready(function () {
      $("#p1").mouseenter(function () {
        alert("You entered p1!");
      });
    });

mouseleave() 메서드는 이벤트 핸들러 함수를 HTML 요소에 연결합니다.

이 함수는 마우스 포인터가 HTML 요소를 떠날 때 실행됩니다.

    $(document).ready(function () {
      $("#p1").mouseleave(function () {
        alert("Bye! You now leave p1!");
      });
    });

mousedown() 메서드는 이벤트 핸들러 함수를 HTML 요소에 연결합니다.

이 함수는 마우스가 HTML 요소 위에 있는 동안, 왼쪽, 가운데 또는 오른쪽 마우스 버튼이 눌렸을 때 실행됩니다.

    $(document).ready(function () {
      $("#p1").mousedown(function () {
        alert("Mouse down over p1!");
      });
    });

mouseup() 메서드는 이벤트 핸들러 함수를 HTML 요소에 연결합니다.

이 함수는 마우스가 HTML 요소 위에 있는 동안, 왼쪽, 가운데 또는 오른쪽 마우스 버튼을 놓으면 함수가 실행됩니다.

    $(document).ready(function () {
      $("#p1").mouseup(function () {
        alert("Mouse up over p1!");
      });
    });

hover() 메서드는 두 가지 함수를 가지며, mouseenter() 및 mouseleave() 메서드의 조합입니다.

첫 번째 함수는 마우스가 HTML 요소에 들어갈 때 실행되고, 두 번째 함수는 마우스가 HTML 요소를 떠날 때 실행됩니다.

    $(document).ready(function () {
      $("#p1").hover(function () {
        alert("You entered p1!");
      },
        function () {
          alert("Bye! You now leave p1!");
        });
    });

focus() 메서드는 HTML 폼(form, 양식) 필드에 이벤트 핸들러 함수를 첨부합니다.

이 함수는 폼 필드에 포커스가 있을 때 실행됩니다.

    $(document).ready(function () {
      $("input").focus(function () {
        $(this).css("background-color", "yellow");
      });
      $("input").blur(function () {
        $(this).css("background-color", "green");
      });
    });

blur() 메서드는 HTML 폼 필드에 이벤트 핸들러 함수를 첨부합니다.

이 함수는 폼 필드가 포커스를 잃을 때 실행됩니다.

$("input").blur(function() {
  $(this).css("background-color", "#ffffff");
});

on() 메서드는 선택한 요소에 대해 하나 이상의 이벤트 핸들러를 연결합니다.

클릭 이벤트를 <p> 요소에 연결합니다.

    $(document).ready(function () {
      $("p").on("click", function () {
        $(this).hide();
      });
    });

여러 이벤트 핸들러를 <p> 요소에 연결합니다.

    $(document).ready(function () {
      $("p").on({
        mouseenter: function () {
          $(this).css("background-color", "lightgray");
        },
        mouseleave: function () {
          $(this).css("background-color", "lightblue");
        },
        click: function () {
          $(this).css("background-color", "yellow");
        }
      });
    });