jQuery Event Methods(JQuery 이벤트 메소드들)
jQuery is tailor-made to respond to events in an HTML page.
JQuery는 HTML페이지의 이벤트들을 수신하는형태로 디지인되었다.
What are Events?(이벤트는 무엇인가?)
All the different visitor's actions that a web page can respond to are called events.
An event represents the precise moment when something happens.
Examples:
웹페이지가 응답할 수 있는 모든 다른 방문자들의 행동들이 이벤트라 불려진다.
이벤트는 특정한 순간에 무언가 일어났다는것을 나타낸다.
예제 :
- moving a mouse over an element
- selecting a radio button
- clicking on an element
- 요소위에 마우스가 움직임
- 라디오 버튼이 선택됨
- 요소가 클릭됨
The term "fires/fired" is often used with events. Example: "The keypress event is fired, the moment you press a key".
Here are some common DOM events:
조건 "fires/fired"는 종종이벤트오 함께 사용된다. 예 : "당신이 키를 누를때 키눌림 이벤트가 발생했다".
다음은 몇가지의 공통적인 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문법)
In jQuery, most DOM events have an equivalent jQuery method.
To assign a click event to all paragraphs on a page, you can do this:
JQuery에서, 대부분의 DOM이벤트들은 동일한 JQuery메소드들을 가진다.
클릭이벤트를 페이지내의 모든 절에 할당하기 위해, 다음과 같이 할 수 있다:
The next step is to define what should happen when the event fires. You must pass a function to the event:
다음단계는 이벤트가 발생할때 무슨일이 생기는지 정의하는것이다. 당신은 이벤트에 함수를 전달 할 수 있다 :
$("p").click(function(){
// action goes here!!
});
Commonly Used jQuery Event Methods(공통적으로 사용된 JQuery이벤트 메소드들)
$(document).ready()
The $(document).ready() method allows us to execute a function when the document is fully loaded. This event is already explained in the jQuery Syntax chapter.
$(document).ready() 메소드는 우리에게 문서가 완전히 로드될때 함수가 실행될 수 있게한다. 이 이벤트는 JQuery문법 장에서 이미 설명했다.
click()
The click() method attaches an event handler function to an HTML element.
The function is executed when the user clicks on the HTML element.
The following example says: When a click event fires on a <p> element; hide the current <p> element:
click()메소드는 HTML요소에 이벤트 핸들러 함수를 결합한다.
함수는 사용자가 HTML요소를 클릭할때 실행된다.
다음 예제는 : <p>요소에 클릭이벤트가 발생할때, 현재의 <p>요소를 숨긴다 :
dblclick()
The dblclick() method attaches an event handler function to an HTML element.
The function is executed when the user double-clicks on the HTML element:
dblclick() 메소드는 HTML요소에 이벤트 핸들러를 결합한다. 이함수는 HTML요소가 더블클릭될때 실행된다.
mouseenter()
The mouseenter() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer enters the HTML element:
mouseenter() 메소드는 HTML요소에이벤트 핸들러 함수를 결합한다.
함수는 HTML요소에 마우스 포인터가 위치할때 실행된다.
mouseleave()
The mouseleave() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer leaves the HTML element:
mouseleave()메소드는 HTML요소에 이벤트 핸들러를 결합한다.
함수는 HTML요소에 마우스 포인터가 떠날때 실행된다.
Example
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
Try it yourself »mousedown()
The mousedown() method attaches an event handler function to an HTML element.
The function is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element:
mousedown() 메소드는 HTML요소에 이벤트 핸들러를 결합한다.
함수는 왼쪽, 중앙, 오른쪽 마우스 버튼이 눌려진상태에서 HTML요소위에 있을때 발생한다.
Example
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
Try it yourself »mouseup()
The mouseup() method attaches an event handler function to an HTML element.
The function is executed, when the left, middle or right mouse button is released, while the mouse is over the HTML element:
mouseup()는 HTML요소에 이벤트 핸들러를 결합한다. 함수는 마우스의 커서가 HTML요소 위에 있는상태에서 왼쪽, 중앙, 오른쪽 버튼이 눌림해제될때 실행된다.
hover()
The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods.
The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element:
hover() 메소드는 두개의 함수 mouseenter()와 mouseleave()메소드들의 결합형이다.
첫번째 함수는 HTML요소에 마우스가 위치할때 실행되고, 두번째는 마우스가 요소 위에서 떠날때 실행된다:
Example
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
Try it yourself »focus()
The focus() method attaches an event handler function to an HTML form field.
The function is executed when the form field gets focus:
focus()메소드는 HTML폼 필드에 이벤트 핸들러를 결합한다.
함수는 폼필드가 포커스를 얻을때 실행된다.
Example
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
Try it yourself »blur()
The blur() method attaches an event handler function to an HTML form field.
The function is executed when the form field loses focus:
blur() 메소드는 HTML폼필드에 이벤트 핸들러를 결합한다.
함수는 폴필드가 포커스를 잃을때 실행된다.
Example
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
Try it yourself »
The on() Method
The on() method attaches one or more event handlers for the selected elements.
Attach a click event to a <p> element:
on()메소드는 선택된 요소들에 하나또는 그이상의 이벤트 핸드러를 결합시킨다.
<p>요소에 클릭이벤트를 결합시키기 :
Attach multiple event handlers to a <p> element:
<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 »
Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »
아두이노스케치용소스.zip
