-
[jQuery] 4. 이벤트 메소드(Event method) - jQuery 강좌Web/jQuery 2015. 6. 13. 11:14jQuery Event Methods
jQuery는 HTML 페이지 내에서 이벤트에 반응하기 위한 맞춤입니다.
1. What are Events?
모든 다른 방문자들의 행위에 따른 웹페이지의 반응은 이벤트라 합니다.
예제:
- 요소 위에 마우스를 이동시킨다.
- 라디오 버튼을 선택한다.
- 요소를 클릭한다.
Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload [ 출처: W3Schools ]
2. jQuery Syntax For Event Methods
jQuery에서, 대부분의 DOM 이벤트는 jQuery 메소드와 동등합니다.
페이지의 모든 단락에 클릭 이벤트를 할당하기 위해, 아래와 같이 작성합니다:
$("p").click();이벤트가 발생하였을 때, 무엇을 할 것인지 정의하는 게 다음 단계입니다:
$("p").click(function(){
// action goes here!!
});3. Commonly Used jQuery Event Methods
$(document).ready()
$(document).ready() 메소드는 문서가 완전히 로드되었을 때, 함수를 실행하는 것을 허용합니다.
click()
click() 메소드는 이벤트 처리 함수를 HTML 요소에 붙입니다.
이 함수는 HTML 요소를 클릭 하였을 때 실행됩니다.
아래 예제는 <p> 요소를 클릭 했을 때, 현재 <p>를 숨기는 예제입니다:
123$("p").click(function(){$(this).hide();});cs dblclick()
dblclick() 메소드는 이벤트 처리 함수를 HTML 요소에 붙입니다.
이 함수는 HTML 요소를 더블 클릭 하였을 때 실행됩니다.
123$("p").dblclick(function(){$(this).hide();});cs mouseenter()
mouseenter() 메소드는 마우스 포인터가 HTML 요소에 들어섰을 때, 실행됩니다:
123$("#p1").mouseenter(function(){alert("You entered p1!");});cs mouseleave()
mouseleave() 메소드는 마우스 포인터가 HTML 요소에 빠져나왔을 때, 실행됩니다:
123$("#p1").mouseleave(function(){alert("Bye! You now leave p1!");});cs hover()
hover() 메소드는 mouseenter()와 mouseleave() 메소드를 합친 메소드 입니다.
첫 번째 함수는 마우스가 들어섰을 때, 두 번째 함수는 마우스가 빠져나왔을 때 실행됩니다.
12345678910111213141516171819202122<!DOCTYPE html><html><head><script>$(document).ready(function(){$("#p1").hover(function(){alert("You entered p1!");},function(){alert("Bye! You now leave p1!");});});</script></head><body><p id="p1">This is a paragraph.</p></body></html>cs focus()
focus() 메소드는 서식 필드가 포커스를 얻었을 때 실행됩니다:
1234$("input").focus(function(){$(this).css("background-color", "#cccccc");});cs blur()
blur() 메소드는 서식 필드가 포커스를 잃었을 때 실행됩니다:
123$("input").blur(function(){$(this).css("background-color", "#ffffff");});cs 'Web > jQuery' 카테고리의 다른 글
[jQuery] 7. Sliding - jQuery 강좌 (0) 2015.06.13 [jQuery] 6. Fading - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 5. 보이기 / 숨기기(Hide / Show) - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 3. 선택자(selector) - jQuery 강좌 (0) 2015.06.13 [jQuery] 2. 문법(Syntax) - jQuery 강좌 (0) 2015.06.13 [jQuery] 1. 시작 - jQuery 강좌 (0) 2015.06.13
