🎯 자바스크립트 라이브러리 jQuery 이벤트 처리와 Ajax 비동기 처리 방법을 알아본다.

jQuery 기본 Event

.ready(function)

HTML문서의 모든 DOM요소들이 완벽하게 사용할 준비가 되면 호출되어 function함수가 실행된다. 파라미터 안에 이벤트 핸들러나 jQuery 코드를 추가한다.

외부 리소스나 이미지와 상관없이 모든 돔 요소들이 준비되면 바로 호출되기 때문에 window.onload보다 빠르다.

.on(events[,selector][,data],function)

.on() 메서드는 .bind() 메서드와 마찬가지로 이벤트 핸들러를 등록하기 위하여 사용되는 메서드이다. .on() 메서드는 동적으로 생성될 요소에 대해서도 이벤트 처리가 가능하다.

<body>
  <button id="create">new</button>
  <div></div>
</body>

$(function (){
    $("#create").on("click",function(){
        $("div").html("<button id='newButton'>ok</button>");
    });
    $("body").on("click","#newButton", function(event){
        console.log("click");
    });
});

.one(events[,selector][,data],function)

.one() 메서드는 .on() 메서드와 동일한 기능을 수행한다. 차이점은 .one()메서드는 메서드 이름처럼 단 한번만 이벤트가 처리되며 자동으로 이벤트 핸들러가 제거(unbound)된다. .on()메서드로 설정한 이벤트 핸들러를 제거하는 방법은 명시적으로 .off(event) 메서드를 사용해야 되는데, .one() 메서드는 이벤트 실행 후에 자동으로 이벤트가 해제된다.

<body>
  <button id="pressMe">Press Me</button>
</body>

$(function (){
   $("#pressMe").one("click", function(){
       console.log("단 한번만 이벤트 실행");
   });
});

.trigger(eventType[,extraParameters])

이벤트가 발생될 때 실행될 함수나 .on()메서드로 연결된 어떤 이벤트 핸들러를 강제적으로 실행시키는 메서드이다. 따라서 .trigger() 메서드를 사용하면 사용자가 실행시키는 이벤트에 순서를 지정해서 실행시킬 수 있다.

$(function (){
	 $("#foo").on("click", function(){
       console.log($(this).text());
   });
   $("#foo").trigger("click");
});

.on()은 특정 돔에 이벤트 발생할 때 동작할 함수를 지정하고, .trigger()는 클릭이벤트를 강제로 실행한다. 브라우저를 새로고침하면 클릭이벤트 발생 없이도 콘솔에 텍스트가 자동 출력되고 있다.

여러개의 돔에 트리거를 사용해서 순서를 정해서 이벤트를 발생시키거나 강제 발생하도록 만들 수 있다.

<body>
    <input type="text" name="message" id="message">
  <button>Press</button>
</body>

$(function (){
   $("button").on("click", function(){
       $("[name=message]").trigger("myCustom");
   });
   $("[name=message]").on("myCustom", function(event){
       $(this).val("메시지를 입력하세요");
   });
   $("[name=message]").on("focus",function(event){
       $(this).val("");
   });
});

.off(events[,selector][,function])

on() 메서드를 사용하여 등록된 이벤트 핸들러를 제거시키는 메서드이다.

.unbind()와는 다르게 .off()메서드는 두 번째 인자인 selector에 필터링할 수 있는 값을 설정할 수 있어서 훨씬 세밀하게 이벤트 핸들러를 제거 시킬 수 있다. 하지만 반드시 .on()메서드에서 사용했던 인자와 동일해야 된다.

<button id="on">on</button>
<button id="off">off</button>

$(function (){
       $("#on").on("click",function(){
           console.log("on~");
       });
       $("#off").on("click", function(){
           $("#on").off("click");
       })
    });

jQuery 폼 Event

.focus([function]) 및 .blur([function])

.focus([function]) 메서드는 대상 요소에 focus 이벤트가 발생되면 function이 실행되는 메서드이다. 이 메서드는 .on("focus",function)와 동일하며 인자 없는 .focus() 메서드는 .trigger("focus")를 줄여서 표현한 것이다.

반대로 .blur(function) 메서드는 대상 요소가 focus를 잃었을 때 실행된다.

<body>
    <form>
        <input id="target" type="text">
        <input type="text">
    </form>
    <button id="other">focus</button>
    <button id="other2">blur</button>
</body>

$(function (){
   $("#target").focus(function(){
       $(this).css("background", "yellow");
   });
   $("#target").blur(function(){
       $(this).css("background", "");
   });
   $("#other").on("click",function(){
       $("#target").focus();
   });
   $("other2").on("click",function(){
       $("#target").blur();
   })
});

.change([function])

대상 요소에 change이벤트가 발생되면 function이 실행되는 메서드이다. 이 메서드는 .on("change",function)와 동일하며 인자 없는 .change()메서드는 trigger("change")를 줄여서 표현한 것이다.

change 이벤트는 값이 변경되었을 경우에 발생되는 이벤트로서, <input>요소 및 <textarea>와 <select>요소에서만 제한적으로 발생되는 이벤트이다.

<body>
    <select name="sweets">
        <option>초콜릿</option>
        <option>캔디</option>
        <option selected="selected">사탕</option>
        <option>아이스크림</option>
        <option>쿠키</option>
    </select>
    <div></div>
</body>

$(function (){
   $("select").change(function(){
        $("div").text($("option:selected").text());
   });
});

. submit([function])

대상 요소에 submit이벤트가 발생되면 function이 실행되는 메서드이다. 이 메서드는 .on("submit",function)과 동일하며 인자 없는 .submit()메서드는 .trigger("submit")를 줄여서 표현한 것이다.

submit 이벤트는 사용자가 form을 submit할 때만 발생되는 이벤트로서 명시적으로 <input type="submit">요소 와 <button type="submit"> 을 클릭하거나 폼의 요소에서 Enter 키를 눌렀을 때 제한적으로 발생되는 이벤트이다.

<body>
    ok입력하면 '성공' 출력하고 아니면 '실패' 출력
   <form id="target">
       <input type="text">
       <input type="submit" value="Go">
   </form>
    <div></div>
</body>

$("#target").submit(function(event){
    var mesg = "실패"
    if($(":text").val()=='ok'){
        mesg = "성공";
    }
    $("div").text(mesg);
    event.preventDefault();
});

. keydown([function])

대상 요소에 keydown이벤트가 발생되면 function이 실행되는 메서드이다. 이 메서드는 .on("keydown",function)과 동일하며 인자 없는 .keydown()메서드는 .trigger("keydown")를 줄여서 표현한 것이다.keydown 이벤트는 사용자가 키보드를 누르는 순간에 발생된다.

<body>
   <form>
       <input type="text" id="target">
   </form>
    <div></div>
</body>

$(function (){
   $("#target").keydown(function(){
       $("div").text(event.keyCode);
   })
});

. keyup([function])

대상 요소에 keyup이벤트가 발생되면 function이 실행되는 메서드이다. 이 메서드는 .on("keyup",function)과 동일하며 인자 없는 .keyup()메서드는 .trigger("keyup")를 줄여서 표현한 것이다. keyup 이벤트는 사용자가 키보드를 눌렀다 떼는 순간에 발생된다.

<form>
   <input id="target" type="text">
</form>
<div></div>

$(function (){
   $("#target").keyup(function(){
        $("div").text($(":text").val().length);
   });
});

jQuery 마우스 Event

. click([function])

대상 요소에 click 이벤트가 발생되면 function이 실행되는 메서드이다. 이 메서드는 .on("click",function)와 동일하며 인자 없는 .click() 메서드는 .trigger("click")를 줄여서 표현한 것이다.

click 이벤트는 대상 요소를 마우스 포인터로 누르고 떨어질 때 발생되는 이벤트로서, HTML의 어떤 요소라도 이 이벤트를 발생시킬 수 있다.

$(function (){
   $("p").click(function(){
       $(this).slideUp();
   })
});

.hover(functionIn, functionOut)

대상 요소에 mouseenter 와 mouseleave 이벤트가 발생되면 각각 functionIn과 functionOut이 실행되는 메서드이다. 이 메서드는 $(selector).mouseenter(functionIn).mouseleave(functionOut) 메서드를 줄여서 표현한 것이다.

<body>   
   <li>aaa</li>
   <li>aaa</li>
   <li class="fade">aaa</li>
   <li class="fade">aaa</li>
</body>

$(function (){
   $("li").hover(
       function(){
           $(this).append($("<span>***</span>"));
       }, function(){
           $(this).find("span").remove();
       }
   )
});

jQuery Ajax 비동기 처리 방식

‘Asynchronous Javascript and XML’ 의 약자로서 비동기 방식으로 처리 하는 새로운 웹 통신 방식을 의미한다.

서버가 중간에 ajax 엔진에 요청하고 엔진이 http 요청을 보내준다. 보내주고 있는 동안에도 사용자는 브라우저를 계속 사용할 수 있다. 서버에서 데이터를 받아서 사용자에게 html데이터가 아닌 xml 데이터로 엔진에게 보내주고 엔진은 html데이터로 바꿔서 사용자에게 보내준다.

기존방식 웹처리

사용자가 요청을 보내면 응답이 올때까지 대기상태다.

ajax 처리방식

중간 엔진이 사용자 요청을 받고 응답을 사용자 대신 기다려준다. 사용자는 계속 웹브라우저를 사용할 수 있다.

따라서 Ajax를 사용하면 페이지 웹페이지 전체가 아닌 일부분에 대한 화면 갱신 및 처리가 가능하며 서버와 통신 중에도 다른 일을 수행할 수 있다. 이것을 비동기 처리라고 한다. 비동기처리는 자바스크립트로 구현되지만 간단한 코드 작성을 위해 제이쿼리를 사용한다. 자바스크립트가 유저이벤트를 처리해서 XML Http Request(XHR)가 요청을 받고 서버에 요청을 보낸다. 다시 데이터를 받고 화면에 보여주는 작업을 한다.

XML Http Request 객체의 통신상태 확인 프로퍼티

readyState 프로퍼티

사용자와 서버의 통신이 똑바로 이루어졌나 상태값을 저장한다.

똑바로 응답을 받아왔을 경우 반환값은 4가 된다.

status 프로퍼티

반환값 200은 처리 성공, 400대는 클라이언트 요청 에러, 500대는 서버 내부 에러를 의미한다.

.jQuery.ajax( url[,settings] )

비동기 HTTP(Ajax) 요청을 수행하는 메소드이다. url은 요청을 보낼 타겟 URL값으로서 문자열로 지정하면 되고 settings은 key/value 쌍으로 구성된, Ajax 요청시 추가로 설정할 수 있는 설정 값이다.

$(function () {
		$("button").on("click", getData);
	});
	
	function getData() {
		$.ajax({
			type:"get",  //전송타입
			url:"sample01_text.jsp",//서버요청대상파일
			dataType:"text",  //응답타입
			success: function (data, status, xhr) {
				$("#result").text(data);
			},
			error: function (xhr, status, e) {
				console.log("error", e);
				console.log("status", status);
			}
		});
	}

<body>
	<button id="a">ajax요청</button>
	<div id="result"></div>
</body>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% String name = "홍길동"; %>
<%= name %>

ajax 코드 안에 사용자가 입력한 데이터 값을 키-밸류로 입력한다. 요청이 오면 엔진이 요청내용을 서버로 보내주고 success부터는 응답 처리 내용을 보여주기 위한 함수를 작성한다.

처리 성공시 실행되는 함수는 응답받은 데이터, 상태, 요청객체를 매개변수로 받는다. 결과 부분에 응답데이터를 화면에 찍어주고 있다. 에러 발생시 에러 함수를 호출하며, 성공함수와 매개변수 순서가 다르다. 에러코드에는 보통 에러메세지가 담겨있다.

연습 1

<body>
	<button id="a">ajax요청</button>
	v1:<input type="text" name="v1" id="v1"><br>
	v2:<input type="text" name="v2" id="v2"><br>
	<div id="result"></div>
</body>

$(function () {
		$("button").on("click", getData);
	});
	
	function getData() {
		$.ajax({
			type:"get",  //전송타입
			url:"sample01_text2.jsp",//서버요청대상파일
			data:{
				v1: $("#v1").val(),
				v2: $("#v2").val()
			},
			dataType:"text",  //응답타입
			success: function (data, status, xhr) {
				$("#result").text(data);
			},
			error: function (xhr, status, e) {
				$("#result").append(error);
				$("#result").append(status);
			}
		});
	}

<% 
	String v1 = request.getParameter("v1");
	String v2 = request.getParameter("v2");
	System.out.print(v1+"\t"+v2);	
%>

<%= v1 + ":"+v2+"전송완료" %>

간단한 데이터 전송

연습 2

<body>
	<button id="a">ajax요청</button>
	<div id="result"></div>
</body>

$(function () {
		$("#a").on("click", getData);
	});
	
	function getData() {
		$.ajax({
			type:"get",
			url:"sample02_json.jsp",
			dataType: "json",
			success:function(data,status,xhr){
				
				var username = data.username;
				var age = data.age;
				
				console.log(username, age);
				$("#result").text(username+":"+age);
			},
			error: function(xhr, status, error){
				$("#result").text(error);
			}
		})
	}

<% 
	String name = "홍길동";
	int age = 20;
%>

{
	"username":"<%= name %>",
	"age":"<%= age %>"
}

json 데이터 만들기

jQeury 제이쿼리 기본문법, 선택자, 필터 (0)	2020.09.24
자바스크립트 이벤트 핸들링 연습2 (0)	2020.09.13
자바스크립트 이벤트 핸들링 연습1 (0)	2020.09.11
자바스크립트 form 객체, 이벤트 핸들링 (3)	2020.09.10
자바스크립트 DOM 객체 제어 (0)	2020.09.09

ABOUT ME

미현 개발 TIL 미현 개발 TIL

jQuery 기본 Event

.ready(function)

.on(events[,selector][,data],function)

.one(events[,selector][,data],function)

.trigger(eventType[,extraParameters])

.off(events[,selector][,function])

jQuery 폼 Event

.focus([function]) 및 .blur([function])

.change([function])

. submit([function])

. keydown([function])

. keyup([function])

jQuery 마우스 Event

. click([function])

.hover(functionIn, functionOut)

jQuery Ajax 비동기 처리 방식

XML Http Request 객체의 통신상태 확인 프로퍼티

readyState 프로퍼티

status 프로퍼티

.jQuery.ajax( url[,settings] )

'JavaScript' 카테고리의 다른 글

티스토리툴바

ABOUT ME

jQuery 기본 Event

.ready(function)

.on(events[,selector][,data],function)

.one(events[,selector][,data],function)

.trigger(eventType[,extraParameters])

.off(events[,selector][,function])

jQuery 폼 Event

.focus([function]) 및 .blur([function])

.change([function])

. submit([function])

. keydown([function])

. keyup([function])

jQuery 마우스 Event

. click([function])

.hover(functionIn, functionOut)

jQuery Ajax 비동기 처리 방식

XML Http Request 객체의 통신상태 확인 프로퍼티

readyState 프로퍼티

status 프로퍼티

.jQuery.ajax( url[,settings] )

'JavaScript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바