[jQuery]이벤트

jQuery는 HTML 페이지의 이벤트에 응답하도록 맞춤 설정됩니다.

 

이벤트란 웹 페이지가 응답 할 수있는 모든 방문자의 동작을 이벤트라고 합니다.

 

예) 요소를 클릭, 마우스 움직이기, 버튼 누르기

 

페이지의 모든 단락에 클릭 이벤트를 할당

$("p").click();

 

다음 단계는 이벤트가 실행될 때, 발생할 일을 정의하는 것입니다. 이벤트에 함수를 전달해야 합니다.

 

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

 

 

일반적으로 사용되는 jQuery 이벤트 메소드

 

 

 

 

$(document).ready()

 

문서가 완전히로드 될 때 함수를 실행할 수 있도록 해줍니다.

 

 

 

click()

 

이 함수는 사용자가 HTML 요소를 클릭할 때 실행됩니다.

 

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

click 이벤트가 <p>요소에서 발생하면 현재요소를 숨깁니다.

 

 

 

dblclick()

 

이 함수는 사용자가 HTML 요소를 두 번 클릭 할 때 실행됩니다.

 

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

<p>요소를 두 번 클릭하면 현재 요소를 숨깁니다.

 

직접해보기

 

 

 

 

mouseenter()

 

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

 

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

직접해보기

 

 

 

 

mouseleave()

 

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

 

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

 

 

 

 

 

 

mousedown()

 

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

 

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

 

 

 

mouseup()

 

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

 

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