jQuery 이벤트 메서드

이벤트는 웹 애플리케이션이 감지할 수 있는 작업입니다。

jQuery는 선택된 요소에 이벤트 처리기를 추가하는 간단한 방법을 제공합니다。

이벤트가 발생할 때, 제공된 함수가 실행됩니다。

다음은 예제 이벤트입니다：

• 웹 페이지 로드

• 요소를 클릭합니다

• 요소에 마우스를 가져다놓습니다

• HTML 테이블 제출

• 키보드의 키 등

이벤트 메서드의 jQuery 문법

jQuery에서는 대부분의 DOM 이벤트가等效한 jQuery 메서드를 가집니다。

페이지 상의 모든 단락에 클릭 이벤트를 할당하려면 다음 작업을 수행하십시오：

$("p").click();

다음 단계는 이벤트가 발생할 때 발생해야 할 상황을 정의하는 것입니다. 이벤트에 함수를 전달해야 합니다：

$("p").click(function(){
　　//　필요한 작업...
　　});

이 예제는 페이지를 클릭할 때 페이지 상의 단락을 숨깁니다：

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

이 예제는 "changeSize" 함수를 클릭 이벤트에 연결합니다：

$(document).ready(function(){
　　$("p").click(changeSize);
});
function　changeSize()　{
　　$(this).animate({fontSize: "+=5px"});
}

일반적인 jQuery 이벤트 메서드

$（document）.ready()

jQuery $(document).ready()메서드는 DOM이 완전히 로드되면 실행되는 함수를 지정합니다。

다음 예제는 DOM을 로드할 때 메시지를 표시합니다：

$(document).ready(function(){
　　$("p").text("现在已经加载了DOM，可以对其进行操作.");
});

click()

jQuery click()메서드는 선택된 요소에 이벤트 처리기 함수를 추가합니다。

사용자가 이 요소를 클릭하면 이 함수가 실행됩니다：

$("p").click(function(){
　　$("this").css({"background-color":"#007FFF", "color":"white"});
});

mouseenter()

jQuery mouseenter()메서드는 선택된 요소에 이벤트 처리기 함수를 추가합니다。

마우스 포인터가 이 요소에 들어오면 이 함수가 실행됩니다：

$("p").mouseenter(function(){
　　$("this").css("background-color", "yellow");
});

mouseleave()

jQuery mouseleave()메서드는 선택된 요소에 이벤트 처리기 함수를 추가합니다。

마우스 포인터가 이 요소를 벗어나면 이 함수가 실행됩니다：

$("p").mouseleave(function(){
　　$("this").css("background-color", "lightblue");
});

mousedown()

jQuery mousedown()메서드는 선택된 요소에 이벤트 처리기 함수를 추가합니다。

사용자가 요소에 마우스 버튼을 누르면 이 함수가 실행됩니다：

$("p").mousedown(function(){
　　$("this").after("<p　style='color:red;'>마우스 키를 누르기</p>");
});

mouseup()

jQuery mouseup()메서드는 선택된 요소에 이벤트 처리기 함수를 추가합니다。

마우스 포인터가 이 요소에�� 때 마우스 버튼을 떼면 이 함수가 실행됩니다：

$("p").mouseup(function(){
　　$("this").after("<p　style='color:green;'>마우스 키를 떼기</p>");
});

keydown()

jQuery keydown()메서드는 선택된 요소에 이벤트 처리기 함수를 추가합니다。

사용자가 키보드의 키를 누르면 이 함수가 실행됩니다：

$("input").keydown(function(event){
　　$("this").css("background-color", "yellow");
　　$("span").text(event.type);
});

keyup()

jQuery keyup()메서드는 선택된 요소에 이벤트 처리기 함수를 추가합니다。

사용자가 키보드의 키를 떼면 이 함수가 실행됩니다：

$("input").keyup(function(event){
　　$("this").css("background-color", "lightblue");
　　$("span").text(event.type);
});

hover（）

jQuery hover()메서드는 두 함수를 가지고 있으며, 이는mouseenter()와mouseleave()메서드를 조합하여 사용합니다.

다음 예제에서는 마우스 포인터가 위에�� 때 모든<p>요소의 배경색:

$("p").hover(function(){
　　$("this").css("background-color", "yellow");
　　},　function(){
　　$("this").css("background-color", "lightblue");
});

on() 메서드를 제공합니다

jQuery는on()선택된 요소에 발생하는 모든 이벤트에 응답할 수 있는 방법을 제공합니다.

사용하여on()에 이벤트 처리기를 추가할 수 있습니다.

다음 예제에서는 모든<p>요소:

$("p").on("click",　function(){
　　$("this").css("background-color", "coral");
});

아래 예제는 모든<p>요소:

$("p").on("mouseenter", function(){
　　$("this").css("background-color", "coral");
});

아래 예제는 여러개의 이벤트 처리 프로그램을<div>요소:

$("div").on("mouseenter　mouseleave　click", function(){
　　$("this").text(Math.random());
});

off() 메서드

jQuery off() 　메서드를 통해 제거된on()메서드에 추가된 하나나 여러개의 이벤트 처리 프로그램을 보여줍니다.

아래 예제는<div>요소에서mousemove 이벤트를 제거합니다:

$("button").click(function(){
　　$("div").off("mousemove");
});

이벤트 객체

jQuery 이벤트 시스템은 W3C 표준에서 이벤트 객체를 정규화합니다.

이벤트 객체를 이벤트 처리 프로그램에 전달하는 것을 보장하십시오.

각 이벤트 처리 함수는 많은 속성과 메서드를 포함한 이벤트 객체를 받습니다.

$("div").on("click", function(event){
　　alert("Event type is ",　+　event.type);
　　alert("Target: ",　+　event.target.innerHTML);
});

아래 표는 모든 이벤트 객체의 메서드와 속성을 보여줍니다:

jQuery 이벤트 참조

완전한 이벤트 참조에 대한 정보는 다음을 방문하세요jQuery Events 참조 매뉴얼。