흠.... 넓은 의미로 보면 맞는거 같기도하고...;;
이벤트를 쉽게 설명하자면 이런 것이다.
면접자가 면접을 갔는데, 면접관이 당신의 이름을 부르면 네~! 라고 대답하지 않겠는가?
여기서 면접관이 당신을 부르는 행위(?) 이것이 이벤트다.
사용자가 어떤 행위를 했을 때만 작동하는 것을 이벤트라 한다.
대표적인 것이 마우스 클릭 이벤트가 되겠다. 4가지 이벤트를 살펴보자.
역시 이부분도 소스 코드를 보고 따라 해보는 것이 좋다.
1. click - 클릭 되었을 때
jQueryObject.click(이벤트 핸들러);
$('#me').click(function()) {
$('#me').text('클릭되었습니다.');
});
2. mouseenter/mouseleave - 마우스 포인터가 위에 있을 때/벗어났을 때
jQueryObject.mouseenter(이벤트 핸들러);
jQueryObject.mouseleave(이벤트 핸들러);
$(function(){
$('#div1').mouseenter(function()){
$('#div1').text('마우스 포인터가 위에 있습니다.');
});
$('#div1').mouseleave(function()){
$('#div1').text('마우스 포인터가 벗어났습니다.');
});
});
3. hover - mouseenter와 mouseleave를 한꺼번에
jQueryObject.hover(mouseenter이벤트 핸들러 ,mouseleave이벤트 핸들러);
$(function(){
$('#div1').hover(function()) {
$('#div1').text('마우스 포인터가 위에 있습니다.');
}, function() { //콤마에 주의 하자
$('#div1').text('마우스 포인터가 벗어났습니다.');
});
});
4. focus/blur - 포커스를 얻었을 때 / 벗어났을 때
jQueryObject.focus(이벤트 핸들러);
jQueryObject.blur(이벤트 핸들러);
$(function(){
$('#div1').focus(function()){
$('#input1').addClass('active');
});
$('#div1').blur(function()){
$('#input1').removeClass('active');
});
});
$('#div1').focus(function()){
$('#input1').addClass('active');
});
$('#div1').blur(function()){
$('#input1').removeClass('active');
});
});
이벤트와 This
이벤트를 사용함에 있어서 중요 사항이 있다.
이벤트 핸들러 안에는 this라는 변수를 사용할 수 있다.
어떤 경우에 this를 사용할까?
클릭 이벤트에서 같은 결과가 나와야 하는 경우를 생각해보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery test</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div class="clickTest">div!</div>
<div class="clickTest">div!</div>
<div class="clickTest">div!</div>
<div class="clickTest">div!</div>
<div class="clickTest">div!</div>
</body>
</html>
이런 HTML 이 있고,
$(function(){
var elements = $('.clickTest');
elements.click(function(){
elements.text('클릭되었습니다');
});
});
이런 스크립트가 있다고 해보자.
위의 소스의 경우에는 하나를 클릭해도 전부 바뀐다.
이런 비극을 막기 위해서는 뭐 각자 고유 ID를 부여하는 것도 한 방법이지만...
만약 클릭해야할 곳이 100개 1000개라면??
각자 다른 이름을 지어줄텐가?? 그럼 상사에게 욕을 시원하게 먹을 것이다.
이때 필요한게 this다.
클릭하는 바로 그 놈(this)만 인식할 때 쓰는거다.
쓰는법은 다음과 같다.
$(function(){
$('.clickTest').click(function(){
$(this).text('클릭되었습니다');
});
});
each 메소드 - 각각에 대하여 처리하기
소스 코드를 보자. <body> 부분만 따왔다.
<body>
<div class="animal">cat</div>
<div class="animal">dog</div>
<div class="animal">turtle</div>
<div class="animal">tiger</div>
</body>
$(function(){
$('.animal').each(function(){
var name = $(this).text();
alert(name);
});
});
위의 소스를 실행하면 같은 다이얼 로그가 4번 표시 된다.
스크립트에 위치한 this는 이벤트가 발생한 요소가 아니라 [현재 처리 중인 요소]를 뜻한다.
어휴~ 3장은 워낙 내용이 많아서 2개로 나누어서 정말 요약만 한거 같다 ㅡㅡ;;
자세한 것은 역시 책을 보는 것을 강추한다 ㅎㅎ;;
4장에서는 실제로 뭔가를 만들어 볼까한다.
앞에 내용을 집약(?)해서 만들어 보는 것이니 길어질 가능성이 농후하다.
그럼 3장 진짜 끝~!
댓글 없음:
댓글 쓰기