20. JavaScript, this

○ this

    - 자기자신의 요소를 가리킴 (참조: jQuery this / 비교: JAVA this )

    - 폼 컨트롤 요소에서만 사용 가능

    - CSS, HTML, jsp 등 여러 언어를 혼용할 때 JavaScript가 중개자 역할을 함
      이때, this는 접근경로를 단순화 해주기 위해 사용함

 

○ this로 요소 접근하기

    - this : 자신의 요소

    - this.value : 자신의 요소가 가지고 있는 실제 값

    - this.form : 자신의 요소가 속해 있는 폼

<h3>this</h3>

<form name="myform" id="myform" action="ok.jsp" onsubmit="return test5(this)">

    <input type="button" name="btn1" id="btn1" value="버튼1" onclick="test1()">
    <input type="button" name="btn2" id="btn2" value="버튼2" onclick="test2(this)">
    <input type="button" name="btn3" id="btn3" value="버튼3" onclick="test3(this.value)">
    <input type="button" name="btn4" id="btn4" value="버튼4" onclick="test4(this.form)">
    <hr>
    <input type="submit" value="전송">

</form>

    - value="버튼1"

    - front단에서는 id, 서버에 전송되면 name으로 접근하는 것이 일반적

function test1(){

    //1) name접근
    var f=document.myform;
    alert(f);           //[object HTMLFormElement]
    alert(f.btn1);      //[object HTMLInputElement]
    alert(f.btn1.value) //버튼1

    //2) id접근(추천)
    alert(document.getElementById("btn1").value);   //버튼1

}//test1() end

 

    - value="버튼2"

    - onclick="test2(this)"

function test2(obj){
    alert(obj);       //[object HTMLFormElement]
    alert(obj.value); //버튼2
}

 

    - value="버튼3"

    - onclick="test3(this.value)"

function test3(val){
    alert(val);  //버튼3
}

 

    - value="버튼4"

    - onclick="test4(this.form)"

function test4(f){
	alert(f.btn4);       //[object HTMLInputElement]
    alert(f.btn4.value); //버튼4
}

 

 

    - onsubmit="test5(this)"

function test5(f){
    alert(f);  //[object HTMLFormElement]
}