jQuery 는 html 이벤트를 만들수 있습니다.
이벤트(Events)가 무었인지 알아보겠습니다.
웹 페이지가 응답 할 수있는 모든 다른 방문자의 행동을 이벤트라고합니다.
이벤트는 무언가가 일어나는 순간을 나타냅니다.
관련예제
어떤 요소에 마우스가 오버되었을 경우
라디오버튼을 선택했을 경우
클릭 이벤트가 발생했을 경우
마우스 이벤트에는 click, dbclick(더블클릭), mouseenter(마우스오버), mouseleave(마우스아웃) 등이 있고
키보드 이벤트에는 keypress(키보드클릭), keydown, keyup 등이 있고
폼 이벤트에는 submit, change, focus, blur 등이 있고
Document/Window 이벤트에는 load, resize, scroll, upload 등이 있습니다.
jQuery 이벤트 메서드에 대한 구문
페이지의 모든 구문에 클릭 이벤트를 넣고 싶으면, 아래와 같이 코딩할 수 있습니다.
$("p").click(); // p태그를 클릭 했을 경우
$("p").click(function(){
// 여기에 클릭 이벤트 내용을 넣으면 됩니다.
});
일반적으로 사용되는 jQuery 방법
$(document).ready() 는 문서가 완전히 로딩이 되었을 때 기능을 수행합니다. jQuery Syntax 페이지에 설명이 되어 있습니다.
click()
click() 메서드는 html 의 이벤트 핸들링 함수에 연결을 할 수 있습니다.
html 요소에 대하여 사용자가 클릭을 했을 때 함수가 실행됩니다.
아래는 p태그에 클릭 이벤트 발생시 관련 예제 입니다.
$("p").click(function(){
$(this).hide();
});
// p태그 클릭시 숨기는 함수죠.
<!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>첫번째 구문입니다.</p>
<p>두번째 구문입니다.</p>
<p>세번째 구문입니다.</p>
</body>
</html>
↓
↓
↓
위 그림 처럼 p 태그를 클릭했을 때 하나씩 p태그가 없어지는 모습을 볼 수 있습니다.
dbclick()
마우스 더블클릭시에 이벤트를 걸수 있습니다.
$("p").dblclick(function(){
$(this).hide();
});
// 더블 클릭시 p태그 구문 숨기기
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>첫번째 구문입니다.</p>
<p>두번째 구문입니다.</p>
<p>세번째 구문입니다.</p>
</body>
</html>
↓
↓
↓
// 더블 클릭시 p태그의 구문이 사라집니다.
다음 장에서 mouseenter(), mouseleave(), mousedown(), mouseup() 에 대해서 알아보겠습니다.
'jQuery > jQuery Tutorial ' 카테고리의 다른 글
| jQuery Mobile 아이콘 (0) | 2013.11.07 |
|---|---|
| jQuery Events hover(), focus(), blur() (0) | 2013.05.10 |
| jQuery events mouseenter(), mouseleave(), mousedown(), mouseup() (0) | 2013.05.10 |
| jQuery Selectors (0) | 2013.05.08 |
| jQuery 기초 (0) | 2013.05.08 |
