jQuery - 이벤트 메서드

이벤트 메서드

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

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

예:

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

"fire/fired" 라는 용어 는 종종 이벤트와 함께 사용됩니다. 예: "키를 누르는 순간 키 누르기 이벤트가 발생합니다."

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 구문

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

 

dblclick()

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

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

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

 

 

마우스 입력()

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

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

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

 

 

마우스 놓기()

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

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

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

 

 

마우스다운()

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

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

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

 

 

마우스업()

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

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

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

 

 

호버()

이 hover()메서드는 두 가지 기능을 사용하며 mouseenter()및 mouseleave() 메서드의 조합입니다.

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

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

 

 

집중하다()

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

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

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

 

 

흐림()

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

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

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

 

 

 

on() 메서드

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

요소 에 클릭 이벤트 연결 <p>:

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