개발 흔적 남기기

클릭 이벤트를 처리하고자 할때, jQuery를 통해 보다 쉽게 이벤트를 정의할 수 있습니다.

on(), click(), bind(), onclick()등 여러가지 방법이 있는데, 제가 주로 사용하는 on()과 click()의 차이에 대해 알아보겠습니다.

click()

단순하게 정적페이지에 로드된 요소에 클릭이벤트를 처리하고자 할때 click()메소드를 자주 사용합니다. 해당 클릭이벤트는 동적처리가 불가능합니다.

다음 예제를 확인해보겠습니다.

See the Pen jQuery click by myhappyman (@myhappyman) on CodePen.

name속성이 save인 button요소를 클릭하면 click()이벤트 처리로 body태그에 click!!!을 찍어냅니다.

on()

이번엔 on() 메소드입니다.

on() 메소드는 주체가 되는 부모속성의 이벤트를 물려받아서 지정 선택자에게 이벤트를 연결할 수 있습니다.

물론 잘 못사용하면 click()이벤트처럼 정적으로 사용이 되므로 부모속성을 이용하여 처리한다는 이부분을 참고하셔야 합니다.

바로 예제를 확인해보겠습니다.

See the Pen jQuery on Click by myhappyman (@myhappyman) on CodePen.

ready안에 동작을 간단하게 설명해자면 HTML 내 클릭한 대상이 name값으로 add를 가지는 버튼 태그이면 body태그에 "+버튼"을 생성하는 예제입니다.

적용한 on()메소드의 파라미터를 확인해보겠습니다.

1. 첫번째 파라미터에는 행위(click, change, keypress 등)를 지정합니다. 이번 예제에서는 클릭을 처리하고 싶으므로 "click"으로 지정합니다.

2. 두번째 파라미터에는 지정자를 선택할 수 있습니다. name의 속성이 add인 버튼에 이벤트를 지정하고 싶으므로

"button[name='add']"으로 처리했습니다.

3. 세번째 파라미터는 구현부입니다. 콜백 메소드로 지정한 행위가 일어나면 콜백메소드에 정의한 내용이 동작합니다. body태그에 name속성이 add인 버튼을 생성하도록 append처리하였습니다.

동적으로 이벤트가 전부 할당되어 정상 동작하는 것을 볼 수 있습니다.

동적 이벤트 처리시 잘못된 방법

그럼 동적으로 처리하고자 할 때 잘못된 표현방법은 무엇일까요?

$("button[name='add']").on("click", function () {
    $("body").append("<button name='add'>+</button>");
});

부모요소가 name값이 add인 버튼에 바로 클릭이벤트를 처리하였습니다.

결과는 아래와 같습니다.

이번엔 동일하게 on()메소드를 활용하였지만 동적으로 생성된 버튼은 동작하지 않습니다.

당연하게도 문서가 첫 로드되면서 이벤트는 현재 로드된 요소 중 name값이 add인 첫번째 버튼에만 클릭이벤트가 처리되고 이후에 동적으로 생성된 데이터는 연결되지 않았기 때문입니다.

이 부분을 유의해서 처리하시면 언제든지 동적으로 클릭이벤트뿐만 아니라 키이벤트 마우스이벤트등을 처리 할 수 있습니다.

jQuery를 통해 radio, checkBox의 선택된 값을 가져오거나 강제로 선택되게 하는 방법을 알아보겠습니다.

radio 제어

예제로 이러한 smartPhone.html 있다고 가정하고 진행하겠습니다.

<div class="smartPhoneForm">
	<div>스마트폰</div>
	<div>
		통신사 :
		<input type="radio" name="telecom" value="skt"> SKT
		<input type="radio" name="telecom" value="kt"> KT
		<input type="radio" name="telecom" value="lgt"> LGT
	</div>
	<div>
		브랜드 :
		<input type="radio" name="brand" value="samsung"> 삼성
		<input type="radio" name="brand" value="apple"> Apple
		<input type="radio" name="brand" value="lg"> LG
	</div>
</div>

선택된 값 가져오기

$("input[name='radio의 name값']:checked").val();
//ex)$("input[name='telecom']:checked").val();

값 강제로 선택시키기

$("input[name='radio의 name'][value='선택할 값']").prop("checked", true);
//$("input[name='telecom'][value='skt']").prop("checked", true);

checkbox 제어

checkbox 이벤트를 위한 checkbox.html 예제입니다.

<div class="favoriteBrand">
	<div>좋아하는 브랜드를 선택하세요</div>
	<div>
		<span><input type="checkBox" name="brand" value="acne"> 아크네 스튜디오</span>
		<span><input type="checkBox" name="brand" value="burbbery"> 버버리</span>
		<span><input type="checkBox" name="brand" value="louis_vuitton"> 루이비통</span>
	</div>
	<div>
		<span><input type="checkBox" name="brand" value="gucci"> 구찌</span>
		<span><input type="checkBox" name="brand" value="givenchy"> 지방시</span>
		<span><input type="checkBox" name="brand" value="off_white"> 오프화이트</span>
	</div>
</div>

체크박스 선택된 개수 가져오기

$("input[name='checkBox의 name값']:checked").length
//$("input[name='brand']:checked").length

체크박스 선택된 값 가져오기

var len = $("input[name='brand']:checked").length;
if(len > 1){ //개수를 체크하고 2개부터는 each함수를 통해 각각 가져온다.
    $("input[name='brand']:checked").each(function(e){
        console.log($(this).val())
    })
}

배열을 만들어 담아도 된다.

var len = $("input[name='brand']:checked").length;
var checkArr = [];
if(len > 1){ //개수를 체크하고 2개부터는 each함수를 통해 각각 가져온다.
    $("input[name='brand']:checked").each(function(e){
        var value = $(this).val();
        checkArr.push(value);        
    })
}

console.log(checkArr);

체크박스 강제로 선택시키기

$("input[name='checkBox의 name'][value='선택시킬 value값']").prop("checked", true);
//$("input[name='brand'][value='burbbery']").prop("checked", true);

특정 checkbox의 모든값 선택하기

$("input[name='brand']").each(function(e){
    $(this).prop("checked", true);
});
//brand로 설정된 모든 checkbox선택

각각 값에 접근하여 true처리하여 선택한다.

특정 checkbox의 모든값 해제하기

$("input[name='brand']").each(function(e){
    $(this).prop("checked", false); //false는 해제된다.
})

각각 값에 접근하여 false처리하여 해제한다.

jQuery 플러그인 중 form태그 내부의 데이터를 편하게 비동기 처리해주는 기능이 있습니다.

바로 jQuery의 ajaxSubmit(); 인데요.

submit이지만 비동기로 처리할 수 있고 동작 이전의 함수처리, 이후의 함수처리도 정의할 수 있는 장점이 있습니다.

사용법은 아래와 같습니다.

사용방식

var options = { 
        target:        '#output2',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 

        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 

        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    }; 

$(formTag).ajaxSubmit(options);

formTag에 ajaxForm() 메소드를 연결하여 사용합니다.

저런 옵션들이 있구나 정도로 보시면 될 것 같고, 좀 더 자세한 사용법을 보겠습니다.

ajax동작 처리에 따른 결과값 받는 예제(주의점)

form.html

<form id="myForm" action="insertBoard.do" method="post"> 
    title: <input type="text" name="title" /> 
    Content: <textarea name="Content"></textarea> 
    <input type="submit" value="Save" /> 
</form>

form.js

<script>
var option = {
    dataType : 'json', //JSON형태로 전달도 가능합니다.
    url: "insertBoard.do",
    success: function(res){
        alert(res.msg); //res Object안에 msg에는 결과 메시지가 담겨있습니다.
    },
    error: function(res){
        alert("에러가 발생했습니다.")
    }
}

$('#myForm').submit(function() { //submit이 발생하면
    $(this).ajaxSubmit(option); //옵션값대로 ajax비동기 동작을 시키고
    return false; //기본 동작인 submit의 동작을 막아 페이지 reload를 막는다.
});
</script> 

여기서 주의하실점은 submit기능 동작 정의 후 마지막에 있는 return false;입니다.

이부분을 처리하지 않으면 아무리 success, error옵션을 처리하여도 페이지가 submit이 먹히기 때문에 페이지 리로드 현상이 발생하고 결과값에 따른 동작(alert() 메시지 출력)을 정상적으로 처리 할 수 없습니다.

위 예제에서 사용한 option에서 사용한 기능 외에 다른 기능은  공식 API 문서를 통해 더 많은 정보를 볼 수 있습니다.

아래에 공식 API 정보가 있는 URL을 링크해두었으니 참고하시면 더 좋을 것 같습니다.

http://jquery.malsup.com/form/#getting-started

jQuery를 통해 select박스 제어를 알아보겠습니다.

/********** value **********/
$(선택자).val(); //value값 가져오기
$("#id").val(); //id로 접근하여 value가져오기
$("select[속성='속성명']").val(); //속성으로 접근하여 value가져오기

/********** text **********/
$(선택자 option:selected).text(); //text값 가져오기
$("#id option:selected").text();
$("select[속성='속성명'] option:selected").text();

text값은 가져올때 해당자식인 option의 선택된 개체를 가져와야합니다. option:selected

해당 옵션이 없으면 select 자식으로 들어간 option값 전부를 가져오게 됩니다.

change이벤트에 따른 val값 및 text값을 가져오는 예제

name속성이 location인 select박스의 값이 변경됨에 따른 선택값 처리를 알아보겠습니다.

HTML

<div>
  <select name="location">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
  </select>
</div>
<div id="output">
</div>

jQuery

$("select[name=location]").change(function(){
  console.log($(this).val()); //value값 가져오기
  console.log($("select[name=location] option:selected").text()); //text값 가져오기
});

select박스 값이 바뀔때마다 console.log가 출력되는걸 볼 수 있습니다.

추가적으로 SELECT - OPTION 태그 내부에 VALUE값을 지정을 안하는 경우가 있는데, 이런 경우에는 jQuery .val() 이나 바닐라 .value로 값을 가져올 경우 text값을 가져오게 되니 유의하시기 바랍니다.

프로젝트 중간에 요구사항으로 멀티 셀렉트를 하게 되었는데 사용할만한 UI는 대부분 부트스트랩이나 시멘틱 UI등으로

컴포넌트 적용을 해야해서 기존 개발되어있던 CSS에 영향을 미치게 되어 사용할 수 없었다.

모양은 이쁘지 않지만 멀티 선택이 가능한 select박스가 있어 공유한다.

https://www.jqueryscript.net/form/Drop-Down-Combo-Tree.html

jquery ComboTree이며 해당 URL에서 원본을 다운받아 사용하면 된다.

특이한 점이 있다면 input text태그에 JSON형태의 데이터를 넣어야 한다.

다운받으면 예제들이 있으니 간단하게 뜯어보고 comboTreePlugin.js부분을 원하는 형태로 조금 뜯어고쳐서 커스텀도 가능하니 원하는형태로 사용해보면 좋을 것같다.

내부에 존재하는 css에도 어려운문법이 없으니 쉽게 커스텀이 가능하다.

아래는 커스텀하여 사용한 소스와 UI이다.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>multiple select</title>
    <style media="screen">
      *{
        margin: 0px;
        padding: 0px;
      }
      .line{
        width: 200px;
        border: 1px solid #ddd;
        text-align: center;
        margin: 30px 0 30px 0;
        padding: 10px;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/jquery/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/comboTreePlugin.js"></script>
    <script type="text/javascript" src="js/icontains.js"></script>
    <script type="text/javascript">
      var test1, test2;

      $(document).ready(function() {
        init();
      });

      function init(){
        var test1_JSON = new Array();
        var test2_JSON = new Array();

        jsonMaker(10, test1_JSON);
        jsonMaker(10, test2_JSON);

        test1 = $("#test1").comboTree({
          source : test1_JSON,
    			isMultiple: true,
    			cascadeSelect: false
        })

        test2 = $("#test2").comboTree({
          source : test2_JSON,
    			isMultiple: true,
    			cascadeSelect: false
        })
      }

      function jsonMaker(limit, arr){
        for(i=0; i<limit; i++){
          arr.push({id: "id"+i, title: "title"+i});
        }
      }
    </script>
  </head>
  <body>
    <div class="line">
      <input type="text" id="test1" autocomplete="off" placeholder="Multiple Select">
    </div>
    <div class="line">
      <input type="text" id="test2" autocomplete="off" placeholder="Multiple Select">
    </div>
  </body>
</html>

커스텀한 소스도 첨부하니 사용하실분은 다운받아서 index.html부분을 참고하여 사용하면 될 것 같다.