jQuery Form API, 이벤트 메서드

jQuery 2016. 2. 19. 14:27

jQuery Form API

1. .submit(handler(eventObject)

$('form').submit(function() {

if ($('#txtName').val() == '') {

alert("이름을 입력 하세요.");

return false;

} else {

return true; // submit 진행

}

});

<form>

</form>

2. .serialize(), .serializeArray()

.serialize()의 경우 선택한 폼의 값을 “a=1&b=2&c=3”등의 형태로 반환하며,

.serializeArray() 메서드의 경우 jQuery 배열 개체로 반환한다.

$(document).ready(function() {

$('form').submit(function() {

110

var datas = $(this).serialize();

alert(datas);

return false;

});

<div>

<form>

<input type="text" name="a" value="1" id="a" /><br /> <input

type="text" name="b" value="2" id="b" /><br /> <input

type="hidden" name="c" value="3" id="c" /><br /> <select name="d">

</select><br /> <input type="submit" name="f" value="Submit" id="f" />

</form>

</div>

.serialize()로 form에 있는 값을 한줄 데이터로 받으며, <ahref="s.jsp?a=1&b=2&c=3&d">클릭</a> 이렇게 한줄로 받아온 데이터를 다른 jsp로 넘겨줄 수 있다. ?는 파일.

jQuery 이벤트 메서드

.blur() 요소에서 포커스를 잃을 경우에 발생하는 이벤트

.change() <input />, <textarea />, <select /> 요소의 값 변경시 발생하는 이벤트.

.click() 마우스 클릭 시 발생하는 이벤트 이다.

.dblclick() 마우스를 더블클릭 했을 경우 발생하는 이벤트 이다.

.focus() 요소에 포커스 되었을 때 발생하는 이벤트 이다.

.hover() 마우스가 요소 위에 위치했을 때 발생하는 이벤트 이다.

.keydown() 키 입력 시 발생되는 이벤트이며, 모든 키에 대핬 적용이 된다.

.keypress() keydown 이벤트와 동일하게 키 입력 시 발생이 되지만 enter, tab등의 특수키에는 이벤트가 발생되지 않는다.

.keyup() 키 입력 후 발생되는 이벤트 이다.

.mousedown() 마우스 클릭 시 발생하는 이벤트이다.

.mouseenter() 선택한 요소의 영역에 마우스가 위치했을 때 발생되는 이벤트.

.mouseleave() 선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트.

익스플로러에서만 발생되는 이벤트지만 jQuery는 브라우저 관계없이 사용할 수 있도록 시뮬레이터 된다.

.mouseout() 선택한 요소의 영역에서 마우스가 벖어 났을 때 발생되는 이벤트.

.mouseup() 마우스 클릭 후 발생되는 이벤트.

.ready() DOM이 모두 준비 되었을 때 발생하는 이벤트.

1. .click()

예전 웹 프로그램 개발 시에는 HTML과 자바스크립트를 혼용하여 사용을 하였으나,

현재는 웹표준이 자리를 잡고 코드 분리를 통한 유지보수 반복적인 패턴의 코드중복을 피하기 위해

스크립트를 통해 HTML 요소와 이벤트를 맵핑하는 방식으로 개발을 하고 있다.

이전방식) 필요한 함수를 만들고, 할당 이벤트가 필요한 요소에 일일이 적용했다

function tdClick(obj) {

alert(obj);

}

</script>

<tr>

</tr>

<tr>

</tr>

추천방식) HTML 요소에는 아무런 작업을 하지 않았다.

$(document).ready(function() {

$("td").click(function() {

alert($(this).text());

});

</script>

<tr>

</tr>

<tr>

</tr>

웹에서 흔히 사용이 되지는 않지만 jQuery를 통해서 쉽게 구현이 가능한 마우스 더블클릭을 이용하고 싶다면, 위의 예제에서 .click() 메서드를 .dblclick()으로 변경만 하면 아무런 문제없이 사용이 가능하다.

$(document).ready(function () {

$("td").dblclick(function() { alert($(this).text()); // 더블클릭은 dblclick으로 제어

});

</script>

예제) td에 click을 할 수 있게 만들어 alert으로 내용 확인

$(document).ready(function() {

$('td').click(function() {

alert($(this).text() + ':' + $(this).attr('title')); // this는 위에서 click을 한 td 자체가 this가 된다.

});

</script>

</head>

<body>

<h2>jQuery 시작 Selector</h2>

<p>jQuery 에 대한 자세한 내용을 보려면 jquery.com 을 방문할 수 있다.</p>

<div>

<tr>

</tr>

<tr>

</tr>

<tr>

116

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

결과 각 td를 클릭하면 속성 값이 없으므로 undefined가 뜨고 2번째 td만 title이 있어 해당 내용 '2번'이 뜬다.

2. .keydown()

키다운 이벤트를 사용하는 이유는 엔터키와 같은 특수 입력키에 대한 내용도 체크하기 위함이며, 특수키에 대한 값이 필요 없을 경우에는 .keypress() 를 사용하면 된다.

예제) 입력되는 키에 따른 할당 “keyCode”값이 노출되는걸 확인 할 수 있으며, “Enter”, “Ctrl”, “Shift”등의 특수 키보드의 값도 확인 할 수 있다.

$(document).ready(function() {

$("#txtInput").keydown(function(e) { // 이벤트라서 파라미터 이름이 e

$("#txtKeyCode").val(e.keyCode);

});

</script>

</head>

<body>

<div>

</div>

3. .bind()

bind라는 말 그대로 개체와 이벤트를 묶어주는 역할

$('div').click(function() { alert('click'); }

event 메서드에서 이렇게 사용했다면, bind() 메서드를 통해서는 다음과 같이 표현 된다.

$('div').bind('click', function() { alert('bind click'); }

여러개의 이벤트를 한번에 묶어주는 역할을 한다.

예제) 마우스의 포인터가 지정한 요소에 들어 왔을 때와, 나갔을 때의 이벤트를 체크하여 상태를 표시하며,

bind()에 "mouseenter, mouseleav"” 이벤트를 이용한 예제

var countEnter = 0;

var countLeave = 0;

$(document).ready(function() {

$("#mouseArea").bind("mouseenter mouseleave", function(e) {

if (e.type == 'mouseenter') {

countEnter++;

$("#spResult").text(countEnter + " MouseEnter");

} else {

countLeave++;

$("#spResult").text(countLeave + " MouseLeave ");

}

});

</script>

</head>

<body>

AREA(DIV) MOUSE : <span id="spResult"></span>

</div>

AREA(DIV) MOUSE라는 텍스트 위에 마우스 커서를 올리면 숫자가 올라간다.

4. .live(), die() - 최신 버전에서는 on(), off()로 바뀜

.click(), .bind() 와 같은 이벤트 메서드에서는 이미 로드가 완료된 개체에 이벤트를 주었다면,

.live() 메서드의 경우 동적으로 생성될 개체나 요소에 대해서도 이벤트를 맵핑 할 수 있다.

$('a').click(function() { alert('click a'); }); 의 경우 HTML 문서에 존재하는 “a”요소를 찾아 마우스 클릭 이벤트를 맵핑 하였으나, 이후에 동적으로 추가된 “a” 요소에는 영향을 주지 못한다.

하지만 $('a').live('click', function() { alert('live click a'); });를 사용 한다면 처음 로드 된 요소는 물론 로드 후에 동적으로 생성되는 “a” 요소에 대해서도 동일한 이벤트가 적용된다.

live()로 동작하게 한 이벤트는 die()로 삭제 가능.

예제) 버튼 클릭시마다 append가 되는 이벤트를 만들고, 생성된 텍스트를 클릭하면 alert이 뜨는 이벤트를 생성, 다음 die 버튼을 클릭하면 이 alert 이벤트를 삭제하는 예제.

<!DOCTYPE html>

<html>

<head>

<title>jQuery</title>

$(document).ready(function () {

$('#btnAdd').click(function () {

$('ul').append('<li>list item Add(' + $('li').length + ')</li>');

});

$('ul').on('click', 'li',function(e) { // ul 이하의 li 클릭시

alert($(this).text()); // 해당 li(this)를 alert으로 띄움

});

$('#btnDie').click(eventDie);

});

function eventDie() { // 위에서 ul 이하 li에 지정한 click 이벤트를 삭제

$('ul').off('click','li');

}

</script>

</head>

<body>

<div>

<ul>

</ul>

</div>

</body>

</html>

5. .one()

.bind() 메서드와 동일한 방식으로 이벤트를 추가한다. 하지만 .one() 메서드를 통해 추가된 이벤트는 딱 한번만 실행이 되고 사라지게 된다.

예제) 리스트를 클릭하면 alert이 뜨는 이벤트. 단, 최초 1회만 실행되고 이후에는 실행 안된다.

<!DOCTYPE html>

<html>

<head>

<title>jQuery</title>

$(document).ready(function() {

$('li').one('click', function() {

alert($(this).text());

});

134

});

</script>

</head>

<body>

<div>

<ul>

</ul>

</div>

</body>

</html>

저작자표시

'jQuery' 카테고리의 다른 글

Ajax (Asynchronous JavaScript and XML) (0)	2016.03.21
클릭시 이미지와 가격 텍스트가 바뀌는 예제 (0)	2016.02.22
jQuery 속성 메서드: attr(), removeAttr(), val(), .text(), .html() (0)	2016.02.19
JQuery 기초, hasClass(), addClass(), removeClass(), toggleClass(), position(), width(), height() (0)	2016.02.19
JQuery: find(), siblings() (0)	2016.02.19