jquery 이벤트에 정리를 해보도록 하겠습니다. jquery는 이벤트를 쉽고 간단하게 핸들링할 수 있는 여러 메서드를 제공하고 있습니다. jquery를 사용하지않는다면 직접 이벤트 지원 메서드를 사용자가 작성해야 하지만 jquery를 사용한다면 그런 수고를 덜 수 있습니다.
지원되는 메서드는 마우스 클릭 부터 더블클릭 그리고 마우스 휠에 대한 이벤트까지 쉽게 처리하고 사용할 수 있습니다.
jquery에서 제공하는 이벤트 관련 메서드는 수 없이 많습니다. jquery를 사용하는 개발자는 많은 jquery를 이벤트를 쉽게 이용할 수 있고, 다양한 UX를 만들 수 있다는 장점이 있습니다.(저 같이 게으른 게발자에게는 더 없이 좋은 일입니다.) 오늘은 jquery 이벤트 지원 메서드에 대해 정리를 해보았습니다.
| 종류 | 설명 |
| .blur() | 요소에서 포커스를 잃을 경우 발생하는 이벤트 |
| .change() | <input /> <textarea /> <select /> 요소의 값 변경시 발생하는 이벤트 |
| .click() | 마우스 클릭 시 발생하는 이벤트 |
| .dblclick() | 마우스 더블클릭시 발생하는 이벤트 |
| .focus() | 요소에 포커스 되었을때 발생하는 이벤트 |
| .hover() | 마우스가 요소위에 위치했을때 발생하는 이벤트 |
| .keydown() | 키 입력시 발생하는 이벤트, 모든 키에 적용 |
| .keypress() | keydown 이벤트와 동일하게 키 입력시 발생 enter, tab 등 특수키에는 발생하지 않습니다. |
| .keyup() | 키 입력후 발생하는 이벤트 |
| .mousedown() | 마우스 클릭시 발생하는 이벤트 |
| .mouseenter() | 선택한 요소의 영역에 마우스가 위치했을때 발생되는 이벤트 |
| .mouseleave() | 선택한 요소의 영역에서 마우스가 벗어 났을때 발생되는 이벤트, 인터넷익스플롤러에서만 발생되는 이벤트 jquery는 브라우저 관계없이 사용되도록 시뮬레이터 됩니다. |
| .mouseout() | 선택한 요소의 영역에서 마우스가 벗어났을 때 발생되는 이벤트입니다. |
| .mouseup() | 마우스 클릭 후 발생하는 이벤트 |
| .ready() | DOM이 모두 준비가 되었을 때 발생하는 이벤트 |
| .resize() | resize() 될 경우 발생되는 이벤트 |
| .scroll() | HTML 문서가 스크롤 되었을때 발생하는 이벤트 |
| .select() | 선택한 개체를 마우스를 통해 선택할 때 발생하는 이벤트 |
| .submit() | submit가 일어날 떄 발생하는 이벤트입니다.(form 메서드 참고) |
jquery에서 지원하는 이벤트 목록을 보면 정말 많습니다. 많은 목록의 이벤트를 다 외워둘 필요는 없습니다. 사용법은 거의 대동소이합니다. 따라서 이러한 jquery에서 이런 이벤트를 지원하는 구나 하는 정도로만 알고계시면 됩니다. 어떤 이벤트가 필요하다고 생각되시면 그때 목록을 보시고 사용하시면 됩니다.
가장 많이 사용되는 click 이벤트의 사용법을 예제를 통해 보시면 어떤 방법으로 jquery에서 HTML 요소에 이벤트를 할당하고 처리하는지 아시게 될것입니다.
[이전방식]
<script type="text/javascript">
function pClick(obj) {
alert(obj);
}
</script>
<p onclick="pClick('p tag 1 ');">p tag 1</p>
<p onclick="pClick('p tag 2 ');">p tag 2</p>
[필요한 함수를 만들고, 이벤트가 필요한 요소에 일일이 적용]
추천방식
<script type="text/javascript">
$(document).ready(function() {
$("p").click(function() {
alert($(this).text());
});
});
</script>
<p>p tag 1</p>
<p>p tag 1</p>
HTML 요소에는 아무런 작업을 하지 않음.
위와 같은 방식으로 하는 것이 처음에는 어색하고 그렇지만 HTML에서 사용하는 이벤트가 많아지고 동적으로 이벤트와 HTML요소를 맵핑하는 기능을 구현할 경우에는 막노동을 깔끔하게 해결하는 최고의 방법입니다. 또한 HTML 문서를 보기가 깔끔해지며 유지보수도 편하게 할 수 있습니다.
전에 프로그램 개발일을 할 때 주변 지인들과 이야기를 할때 프로그램 개발일이 알고보면 첨단 3D 업종이라고 했던 적이 있습니다.
jquery를 사용하게되면 일일이 수작업을 해야했던 일들이 많이 줄어드는 걸 알 수 있습니다.
.click()
마우스 클릭시 동작하는 이벤트입니다. 선택한 객체에 마우스 클릭 이벤트가 발생할 경우 정의한 메서드(함수)가 실행 되며, 매개변수로 eventData로 이벤트에 대한 값이 전달 됩니다.
$("p").click(function () { alert('마우스 클릭'); });
정의 할 경우 HTML 문서에 존재하는 <p> 태그요소에 클릭 이벤트가 할당되고, 정의 메서드의 결과인 alert('마우스 클릭');을 실행하게 됩니다.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Click 이벤트 사용</title>
<style>
p { color:red; margin:5px; cursor:pointer; }
p:hover { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>첫번째 문단</p>
<p>두번쨰 문단</p>
<p>세번째 문단</p>
<script>
$("p").click(function () {
alert('마우스 클릭');
});
</script>
</body>
</html>
클릭 이벤트가 필요한 요소의 셀렉터를 통해 선택하고, 선택된 모든 요소에 일괄적으로 이벤트가 적용됩니다. 이런 식으로 개발을 하면 코드의 양을 줄이고, 관련 메서드(함수)를 수정할때 일이 확 줄어드는 이점이 있습니다. 코드의 양이 줄어들기 떄문에 클라이언트로 전송되는 데이터도 적어지므로 트래픽에 대한 부담도 줄 일 수 있습니다.
웹에서는 거의 사용되지는 않지만 더블클릭을 구현하고 싶으시다면 위 예제에서 click() 부분을 dblclick()으로 변경하시면 됩니다.
<script>
$("p").dblclick(function () {
alert($(this).text());
});
</script>
마지막으로 키보드 입력시 키보드의 키 값을 알아내는 예제를 통해 eventData의 사용법을 간단하게 알아보겠습니다.
.keydown()
.keydown() 메서드를 사용하는 이유는 엔터키와 특수키 입력 체크를 위해서이며, 특수키에 대한 값이 필요 없을 경우 .keypress()를 사용하면 됩니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
div,pre {background : #FFF; padding:10px; margin:10px;}
table {border:1px solid #aaa;}
td { border:1px solid #aaa; width:25px; height:25px;}
.selected { font-wei:bold; color:white; background-color:red;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#txtinput").keydown(function(e) {
$("#txtKeyCode").val(e.keyCode);
});
});
</script>
</head>
<body style="padding:10px">
<h2>jQuery selector</h2>
<p>jQery에 대한 자세한 것을 보려면 jquery.com을 방문하세요.</p>
<input type="text" id="txtinput" /><br />
<input type="text" id="txtKeyCode" />
</body>
</html>
입력되는 키에 따른 "keycode" 값이 노출 될 것입니다. "enter", "ctrl","tab" 등의 특수 키보드의 값도 확인 할 수 있습니다. jquery에서 지원하는 이벤트 관련 메서드는 많습니다. 모든 것을 다 정리하기는 어렵고 이렇게 사용한다 하는 정도만 정리하였습니다.
'IT > jquery' 카테고리의 다른 글
| jquery event - 이벤트를 동적으로 맴핑하기 (0) | 2013.01.02 |
|---|---|
| jquery 이벤트 메서드 중요메서드 정리 (0) | 2012.12.26 |
| jQuery Form 관련 메서드 정리 (0) | 2012.12.17 |
| jQuery element(요소)의 속성 관련 메서드 정리 (0) | 2012.12.13 |
| jQuery CSS 제어 메서드 정리 (1) | 2012.11.29 |
