최신 웹 개발 튜토리얼
 

jQuery이벤트 방법

❮ 이전 다음 장 ❯

jQuery를이 맞춤형 HTML 페이지에서 이벤트에 응답하는 것입니다.

이벤트는 무엇입니까?

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

일이 발생하면 이벤트는 바로 그 순간을 나타냅니다.

예를 들면 :

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

용어 "fires/fired" 종종 이벤트와 함께 사용됩니다. 예 :는 " keypress 이벤트가, 그 순간 당신이 키를 누르면 시작됩니다."

여기에 몇 가지 일반적인 DOM 이벤트는 다음과 같습니다

마우스 이벤트 키보드 이벤트 양식 이벤트 문서 / 창 이벤트
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload

이벤트 방법에 대한 jQuery를 구문

jQuery를, 대부분의 DOM 이벤트는 등가의 jQuery 방법이 있습니다.

한 페이지에 모든 단락에 클릭 이벤트를 지정하려면, 당신은이 작업을 수행 할 수 있습니다 :

$("p").click();

다음 단계는 때 이벤트가 발생 어떻게해야하는지 정의하는 것입니다. 당신은 이벤트에 함수를 통과해야합니다 :

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

일반적으로 jQuery를 이벤트 방법을 사용

$(document).ready()

$(document).ready() 문서가 완전히로드 된 경우 방법은 함수를 실행하기 위해 우리가 할 수 있습니다. 이 이벤트는 이미 설명되어 jQuery를 구문 장.

click()

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

사용자가 HTML 요소를 클릭 할 때이 기능이 실행됩니다.

다음의 예는 말한다 : 경우에 클릭 이벤트가 발생 <p> 요소; 현재 숨길 <p> 요소를 :

예

$("p").click(function(){
    $(this).hide();
});
»그것을 자신을 시도

dblclick()

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

함수가 실행될 때 HTML 요소에서 사용자 더블 클릭 :

예

$("p").dblclick(function(){
    $(this).hide();
});
»그것을 자신을 시도

mouseenter()

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

마우스 포인터가 HTML 요소 들어가면 함수가 실행된다 :

예

$("#p1").mouseenter(function(){
    alert("You entered p1!");
});
»그것을 자신을 시도

mouseleave()

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

마우스 포인터가 HTML 요소를 벗어날 때 함수가 실행된다 :

예

$("#p1").mouseleave(function(){
    alert("Bye! You now leave p1!");
});
»그것을 자신을 시도

mousedown()

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

이 기능은 마우스가 HTML 요소 위에있는 동안 왼쪽, 가운데 또는 오른쪽 마우스 버튼을 아래로 누를 때 실행된다 :

예

$("#p1").mousedown(function(){
    alert("Mouse down over p1!");
});
»그것을 자신을 시도

mouseup()

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

중앙 또는 오른쪽 마우스 버튼을 해제, 떠날 때 마우스가 HTML 요소 위에있는 동안 기능이 실행된다 :

예

$("#p1").mouseup(function(){
    alert("Mouse up over p1!");
});
»그것을 자신을 시도

hover()

hover() 메소드는 두 가지 기능을 취해의 조합이다 mouseenter() 과 mouseleave() 메소드.

마우스가 HTML 요소를 벗어날 때 마우스가 HTML 요소를 입력 할 때 첫 번째 기능은 실행되고, 상기 제 기능을 실행한다 :

예

$("#p1").hover(function(){
    alert("You entered p1!");
},
function(){
    alert("Bye! You now leave p1!");
});
»그것을 자신을 시도

focus()

focus() 메서드는 HTML 양식 필드에 이벤트 핸들러 함수를 연결합니다.

양식 필드가 포커스를 취득했을 때에이 함수가 실행된다 :

예

$("input").focus(function(){
    $(this).css("background-color", "#cccccc");
});
»그것을 자신을 시도

blur()

blur() 메서드는 HTML 양식 필드에 이벤트 핸들러 함수를 연결합니다.

양식 필드가 포커스를 잃었을 때 기능이 실행된다 :

예

$("input").blur(function(){
    $(this).css("background-color", "#ffffff");
});
»그것을 자신을 시도

on() 방법

on() 메소드는, 선택된 요소에 대한 하나 이상의 이벤트 핸들러를 첨부.

(A)에 클릭 이벤트를 부착 <p> 요소 :

예

$("p").on("click", function(){
    $(this).hide();
});
»그것을 자신을 시도

은 <P> 요소에 여러 이벤트 핸들러를 연결합니다 :

예

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    },
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    },
    click: function(){
        $(this).css("background-color", "yellow");
    }
});
»그것을 자신을 시도

연습으로 자신을 테스트!

연습 1» 운동 2» 운동 3» 운동 4» 운동 5»

jQuery를 이벤트 방법

전체 jQuery를 이벤트 참고로, 우리로 이동하시기 바랍니다 jQuery를 이벤트 참조 .


❮ 이전 다음 장 ❯