jQuery Event Methods (이벤트 메소드)

jQuery Event Methods

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

이벤트 란 무엇입니까?

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

이벤트는 사건이 일어난 정확한 순간을 나타냅니다.

Examples:

• 요소 위로 마우스를 움직이기
• 라디오 버튼 선택하기
• 요소를 클릭하기

"fires / fired"라는 용어는 종종 Event과 함께 사용됩니다. 

Example: : "키를 누를 순간, 키 누르기 이벤트가 발생합니다.

다음은 몇 가지 일반적인 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!!
});

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

$(document).ready()

$ (document) .ready () 메소드를 사용하면 문서가 완전히로드 될 때 함수를 실행할 수 있습니다.

click()

click () 메서드는 HTML 요소에 이벤트 처리기 함수를 연결합니다. 이 함수는 사용자가 HTML 요소를 클릭 할 때 실행됩니다.  

예제 : <p> 요소에서 click 이벤트가 발생하면; 현재 <p> 요소를 숨기기

Example

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

Try it Yourself »

dblclick()

dblclick () 메서드는 HTML 요소에 이벤트 처리기 함수를 연결합니다.

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

Example

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

Try it Yourself »

mouseenter()

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

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

Example

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

Try it Yourself »

mouseleave()

mouseleave () 메서드는 HTML 요소에 이벤트 처리기 함수를 연결합니다.

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

Example

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

Try it Yourself »

mousedown()

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

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

Example

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

Try it Yourself »

mouseup()

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

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

Example

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

Try it Yourself »

hover()

hover () 메서드는 두 개의 함수를 사용하며 mouseenter () 및 mouseleave () 메서드의 조합입니다.

첫 번째 기능은 마우스가 HTML 요소에 들어가면 실행되고, 두 번째 기능은 마우스가 HTML 요소를 떠날 때 실행됩니다:

Example

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

Try it Yourself »

focus()

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

이 함수는 Form 필드가 포커스를 얻으면 실행됩니다.:

Example

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

Try it Yourself »

blur()

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

Form 필드가 포커스를 잃을 때 함수가 실행됩니다.:

Example

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

Try it Yourself »

---

The on() Method

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

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

Example

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

Try it Yourself »

<p> 요소에 여러 이벤트 처리기를 연결합니다:

Example

$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  }, 
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  }, 
  click: function(){
    $(this).css("background-color", "yellow");
  } 
});

Try it Yourself »

---