목차

jQuery Event Methods

  • description : jQuery Event Methods
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-04-15


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

What are Events?

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

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

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

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

Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

jQuery Syntax For Event Methods

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

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

$("p").click();


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

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


Commonly Used jQuery Event Methods

$(document).ready()

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

click()

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

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

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

예제

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

dblclick()

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

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

예제

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

mouseenter()

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

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

예제

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

mouseleave()

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

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

예제

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

mousedown()

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

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

예제

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

mouseup()

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

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

예제

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

hover()

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

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

예제

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

focus()

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

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

예제

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

blur()

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

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

예제

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

The on() Method

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");
        }
      });
    });