[펌글] this.form으로 알아보는 HTML DOM 에서의 this의 의미

By | 1월 29, 2009
- 출처 : 네이버 지식인 -

 

HTML(Javascript)에서 this로 의미되는 것은 크게 두가지 형태가 있습니다.

첫째. window.document 를 가르킬때.

<FORM name=take_form>
<INPUT type='button' value='계산해라!' onclick='take_plus(this.form)' >
</FORM>

위 소스에서 take_plus(this.form) 에 해당되는 부분인데요,
take_plus라는 자바스크립트 function을 버튼 클릭시에 실행하게 돼는데,
해당 function을 호출할때 this.form이라는 파라메터를 넘긴것을 볼수있습니다
여기서 this.form은 풀어쓰면 window.document.form이라고도 볼수있는것이구요
javascript의 객체 접근방법은 상위객체에서 하위객체로 타고 들어가는것인데
window객체(현재창이라고 보시면 됍니다) 안에있는 
document객체(한개의 window에 다수개의 document가 있을수 있지요..) 하윗단의
form객체를 호출한것이라고 보시면 됩니다.

 

둘째. 호출되는 현재 객체 자신을 지칭할때.  (예: input과 같은 form의 하위객체)


<INPUT
 type='button' value='계산해라!' onclick='alert(this.value)'>

 위 소스를 실행후 버튼을 클릭하면 경고(alert)창이 출력되면서 "계산해라!" 라는 문구가 출력되는데,
이때의 this는 호출이벤트를 발생시키는 객체, 곧 해당 input 객체 본인을 가르키게 됩니다.
.value를 함께 전송함으로써 해당 input 객체의 value속성을 뽑아내서 전송시키는것이되겠군요
그래서 위와같은 결과가 나오게 됩니다.

 

<input type="button" name="bt" value="계산해라!">

위 소스에서 보면 this 는 버튼 자신이겠고,

this.type 은 'button'
this.name 은 'bt'
this.value 는 '계산해라!' 가 됩니다.


<input type="button" name="bt" value="계산해라!" onClick="
this.value='계산!'">

위 소스처럼 'document.form이름.자신이름.value' 대신 간단히 'this.value' 로 활용할 수 있습니다.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments