이벤트란 무엇인가요?
웹페이지가 응답할 수 있는 모든 사용자의 행동을 이벤트라 합니다.
이벤트는 무언가가 일어나는 정확한 순간을 말합니다.
예를 들면
엘리먼트 위에 마우스를 이동한다던가
라디오버튼을 클릭하기
엘리먼트를 클릭하기 등등
DOM 이벤트는 다음과 같은 것이 있습니다.
jQuery 이벤트 함수
jQuery 이벤트 핸들링 메서드는 jQuery 내에 있는 코어함수들입니다.
이벤트 핸들러는 무언가가 HTML에서 발생할때 호출되는 메서드들입니다.
만일 <p>태그를 클릭했을경우에 이벤트가 발생하게 하려면 다음과 같이 사용할 수 있겠죠.
$("p").click();
그러나 이것만으로는 동작하지 않습니다.
이벤트가 발생했을 때 처리하려면 이런식으로 이벤트에 함수를 전달해야 합니다.
$("P").click(function(){
//여기에 액션을 기술하면 됩니다.
});
다음 코드를 실행해 봅시다
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
위의 예제를 보면 버튼클릭 이벤트가 발생할때 함수가 호출되었습니다.
$("button").click(function() {..some code... } )
다음 이벤트들도 각각 실행해 봅시다.
더블클릭
$("p").dblclick(function(){
$(this).hide();
});
마우스가 들어갔을 때
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
마우스가 빠져 나왔을 때
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
마우스를 눌렀을 때 (클릭과는 다릅니다.)
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
마우스를 올렸을 때
왼쪽 마우스버튼을 놓을 때 마우스가 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");
});
'WEB_TECH > jquery' 카테고리의 다른 글
| [jQuery] 8. HTML Set (0) | 2013.04.22 |
|---|---|
| [jQuery] 7. HTML Get (0) | 2013.04.22 |
| [jQuery] 6. jQuery method chaining (0) | 2013.04.22 |
| [jQuery] 5. jQuery 이펙트 (0) | 2013.04.22 |
| [jQuery] 3. jQuery 셀렉터 (0) | 2013.04.16 |
| [jQuery] 2. jQuery 문법 (0) | 2013.04.11 |
| [jQuery] 1. jQuery 시작하기 (0) | 2013.04.11 |