jQuery 이벤트
이전 장에서는 순수하게 자바스크립트만 사용해 이벤트를 연결하는 방법을 살펴보았습니다. 웹 브라우저마다 조금씩 차이가 있으므로 어렵게 느꼈을 수도 있습니다. 하지만 jQuery 라이브러리를 사용하면 손쉽게 모든 웹 브라우저에서 동작하는 이벤트를 생성할 수 있습니다.
4.1 간단한 이벤트 연결
지금까지 jQuery 라이브러리로 웹 페이지를 작성할 때 다음 코드를 사용했습니다.
// 이벤트를 연결합니다.
$(document).ready(function () {
});
여기서 ready()가 간단한 이벤트 연결 메소드입니다. ready() 메소드를 사용하면 ready 이벤트 (문서 객체 준비 완료 이벤트)가 연결됩니다.ready 이벤트 이외에도 jQuery 라이브러리는 [표 11-5]처럼 간단한 이벤트 연결 메소드를 제공합니다.
[표 11-5] 간단한 이벤트 연결 메소드
blur |
focus |
focusin |
focusout |
load |
resize |
scroll |
unload |
click |
dbclick |
mousedown |
mouseup |
mousemove |
mouseover |
mouseout |
mouseenter |
mouseleave |
change |
select |
submit |
keydown |
keypress |
keyup |
error |
ready |
간단한 방식으로 이벤트를 연결할 때는 다음 방법을 사용합니다.
$(selector).method(function (event) { });
기본 예제 11-8 click 이벤트 연결
[표 11-5]의 click 이벤트를 연결하고 싶다면 다음 코드처럼 작성합니다. 코드를 실행하고 h1 태그로 생성한 Click을 클릭하면 경고창이 출력됩니다.
[코드 11-14] click 이벤트
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
// 이벤트를 연결합니다.
$(document).ready(function) () {
// 이벤트를 연결합니다.
$('h1').click(function () {
alert('클릭!');
});
});
</script>
</head>
<body>
<h1>Click</h1>
</body>
</html>
이렇게 간단한 형태의 이벤트 연결 방법에서 한 단계 던 나아가 jQuery 라이브러리는 [표 11-6]의 이벤트 연결 메소드도 제공합니다.
[표 11-6] 복합 이벤트 연결 메소드
메소드 |
설명 |
hover() |
mouseenter 이벤트와 mouseleave 이벤트 동시 연결 |
기본 예제 11-9 hover() 복합 이벤트 연결 메소드
hover() 메소드는 클래스를 조작하는 [코드 11-13]에서 사용해 보았습니다. hover() 메소드의 첫 번째 매개 변수에는 mouseenter 이벤트 리스너를 입력하고, 두 번째 매개 변수에는 mouseleave 이벤트 리스너를 입력합니다. 코드를 실행하고 글자 위에 마우스 커서를 올리거나 내리면 색상이 변경됩니다.
[코드 11-15] 복합 이벤트 연결
<!DOCTYPE html>
<html>
<head>
<title>Animate Basic</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
// 이벤트를 연결합니다.
$(document).ready(function () {
// 이벤트를 연결합니다.
$('h1').hover(function () {
// 색상을 변경합니다.
$(this).css({
background: 'red',
color: 'white'
});
}, function () {
// 색상을 제거합니다.
$(this).css({
background: '',
color: ''
});
});
});
</script>
</head>
<body>
<h1>Click</h1>
</body>
</html>
4.2 이벤트 연결 기본
jQuery 라이브러리로 일반 이벤트를 연결할 때는 on() 메소드를 사용하고, 이벤트를 제거할 때는 off() 메소드를 사용합니다.
[표 11-7] 이벤트 연결 메소드
메소드 |
설명 |
on() |
이벤트 연결 |
off() |
이벤트 제거 |
사용자 정의 이벤트 또는 새로 나왔지만 아직 업데이트를 못한 이벤트는 4.1절에서 다룬 간단한 이벤트 연결 메소드를 쓸 수 없습니다. 이러한 이벤트는 반드시 on() 메소드를 사용해 연결해야 합니다. on() 메소드는 다음 두 가지 방법으로 이벤트를 연결합니다.
① $(selector).on(eventName, eventHandler);
② $(selector).on({
eventName_0: eventHandler_0,
eventName_1: eventHandler_1,
eventName_2: eventHandler_2
});
기본 예제 11-10 일반 이벤트 연결
1. 첫 번째 방법으로 이벤트 연결하기
첫 번재 방법을 사용해 이벤트를 연결해 보겠습니다. 다음 코드는 메소드 체이닝을 사용해 문서 객체에 여러 개의 이벤트를 적용합니다. 코드를 실행하고 사각형에 이벤트를 적용하면 색상이 변경됩니다. 도형을 클릭하거나 마우스 커서를 움직여 보세요.
[코드 11-16] 일반 이벤트 연결(1)
<!DOCTYPE html>
<html>
<head>
<title></title>
<scritp src="https://code.jquery.com/jquery-3.1.1.js">
</script>
<script>
$(document).ready(function) () {
// 스타일 변경 및 이벤트 연결
$('box').css({
width: 100,
height: 100,
background: 'orange'
}).on('click', function () {
$(this).css('background', 'red');
}),on('mouseenter', function () {
$(this).css('background', 'blue');
}).on('mouseleave', function () {
$(this).css('background', 'orange');
});
});
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
2. 두 번째 방법으로 이벤트 연결하기
다음 코드는 객체를 사용해 이벤트를 연결합니다. 문서 객체를 조작하는 방법과 비슷하므로 쉽게 이해할 수 있을 것입니ㅏㄷ. 실행 결과는 [코드 11-16]과 같습니다.
[코드 11-17] 일반 이벤트 연결(2)
<script>
$(document).ready(function () {
// 스타일 변경 및 이벤트 연결
$('box').css({
width: 100,
height: 100,
background: 'orange'
}).on({
click: function () {
$(this).css('background', 'red');
},
mouseenter: function () {
$(this).css('background', 'blue');
},
mouseleave: function () {
$(this).css('background', 'orange');
}
});
});
</script>
4.3 이벤트 객체와 기본 이벤트 제거
jQuery 라이브러리를 이용하면 모든 웹 브라우저에서 같은 방법으로 이벤트 객체를 사용할 수 있습니다. jQuery 라이브러리는 다음 코드처럼 이벤트 리스너의 매개 변수르 랏용해 이벤트 객체를 전달합니다.
$('h1').click(function (event) {
});
jQuery 웹 사이트에서 jQuery 라이브러리의 이벤트 객체가 어떠한 속성을 가졌는지 확인할 수 있습니다. 직접 하나씩 살폅조세요.
jQuery Event API (http://api.jquery.com/category/events/)
이 내용에서는 다 다룰 수는 없지만, 이벤트 객체 중 메소드 하나만 짚고 넘어가겠습니다.
[표 11-8] 기본 이벤트 제거 메소드
메소드 |
설명 |
event.preventDefault() |
기본 이벤트 제거 |
이벤트 객체의 preventDefault() 메소드를 사용하면 문서 객체의 기본 이벤트를 제거합니다. 예를 들어 회원가입 페이지에서 사용자가 정보를 정확히 입력했는지 확인한 후 페이지를 이동하려고 기본 이벤트를 제거하는 상황에서 사용합니다.
기본 예제 11-11 기본 이벤트 제거
이전 장에서 설명한 내용이므로 바로 코드를 살펴보겠습니다. 코드를 실행하고 a 태그로 생성한 링크를 클릭하면 경고창이 출력됩니다. 하지만 a태그의 기본 이벤트를 제거했으므로 페이지는 이동하지 않습니다.
[코드 11-18] 기본 이벤트 제거
<!DOCTYPE html>
<html>
<head>
<title></title>
<scriptsrc="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
// 이벤트를 연결합니다.
$(document).ready(function () {
// 이벤트를 연결합니다.
$('a').click(function (event) {
// 출력합니다.
alert('click');
// 기본 이벤트를 제거합니다.
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://hanb.co.kr">Hanbit Media</a>
</body>
</html>
NOTE_ 유효성 검사
이전 장에서 똑같은 예제를 실습했으므로 조금 더 살펴보겠습니다. 일반적으로 입력 양식의 유효성을 검사하려고 기본 이벤트를 제거합니다. 유효성을 검사하는 방법을 살펴보겠습니다. 다음 코드는 사용자가 입력 양식에 한글 이름을 입력했는지 여부를 확인합니다. 한글 이름을 입력 했으면 입력 양식을 제출하고, 한글이 아니라면 기본 이벤트를 제거해서 입력 양식을 제출하지 않게 합니다.
[코드 11-19] 기본 이벤트 제거를 활용한 유효성 검사
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
// 이벤트를 연결합니다.
$(document).ready(function () {
// 이벤트를 연결합니다.
$('form').submit(function (event) {
// input 태그의 값을 추출합니다.
var value = $('input').val();
// 유효성을 검사합니다.
if (value.replace(/[가-힣]g, '').length == 0) {
// 유효성 검사 통과
alert('과정을 진행합니다.');
} else {
// 유효성 검사 실패
alert('한글 이름을 입력해주세요.');
event.preventDefault();
}
});
});
</script>
</head>
<body>
<form>
<label>이름</label>
<input type="text" />
<input type="submit" />
</form>
</body>
</html>
코드의 실행 결과를 확인하기 전에 본문에서 다루지 않은 내용을 잠시 살펴보겠습니다.
우선 다음 코드처럼 input 태그의 값을 추출하거나 조작하는 val() 메소드를 사용했습니다. 따라서 다음 코드는 사용자가 입력한 값을 추출합니다.
// input 태그의 값을 추출합니다.
var value = $('input').val();
이어서 다음 코드로 입력한 값이 유효한지 검사합니다.
// 유효성을 검사합니다.
if (value.replace(/[가~힣]/g, '').length == 0) {
// 유효성 검사 통과
alert('과정을 진행합니다.');
} else {
// 유효성 검사 실패
alert('한글 이름을 입력해주세요.');
event.preventDefault();
}
따라서 코드를 실행한 후 이름으로 한글이 아닌 값을 입력하고 입력 양식을 제출하면 오류를 출력합니다. 그리고 기본 이벤트를 제거했으므로 입력 양식이 제출되지 않습니다.
참고로 살펴본 내용이므로 어렵다고 생각하지 말고 '이런 것이 있구나!'하고 알아두세요.
정규 표현식은 특정한 규칙이 있는 문자열의 집합을 표현하는 데 사용하는 형식입니다. 정규 표현식과 관련된 내용은 이 내용을 모두 구독한 후 별도로 살펴봅니다.
NOTE_ return false
이전 장에서는 return false를 사용해 순수하게 자바스크립트만으로 기본 이벤트를 제거했습니다. jQuery 라이브러리도 같은 방법으로 기본 이벤트를 제거합니다.
// 이벤트를 제거합니다.
$('a').click(function (event) {
// 기본 이벤트와 이벤트 전달을 제거합니다.
return false;
});
하지만 jQuery 라이브러리에서 return false를 사용하면 이벤트 전달도 함께 제거 됩니다. 따라서 앞의 코드는 다음 코드와 의미가 같습니다.
// 이벤트를 연결합니다.
$('a').click(function (event) {
// 기본 이벤트와 이벤트 전달을 제거합니다.
event.preventDefault();
event.stoppropagetion();
});
이벤트 전달은 사용 가능성이 매우 적으므로 이 책에서는 다루지 않습니다. 자바스크립트를 추가로 공부하고 싶다면 이벤트 전달 또는 이벤트 버블링을 찾아봅니다.
'프로그래밍 > Javascript' 카테고리의 다른 글
| 자바스크립트와 jQuery 라이브러리 응용 (0) | 2017.08.18 |
|---|---|
| jQuery 효과 (0) | 2017.08.17 |
| jQuery 문서 객체 조작 (0) | 2017.08.14 |
| jQuery 문서 객체 선택 (0) | 2017.08.14 |
| jQuery 라이브러리 설정 (0) | 2017.08.14 |
