Input 태그 관련한 기술

I. (활동) 으로 event 발생시  DOM 객체 조작

1)에를들어 인풋 객체에 (keyUp) 활동으로 이벤트를 발생 시켜보겠다.

-----.HTML파일------

<input (keyup)=" KeyUpFunc ( $event ) ">

<p>{{printtt}}</p> 

이렇게 keyup 활동이 발생할 경우 이벤트 객체를 받는 KeyUpFunc 을 작동하도록 했다. 그리고 printtt에 바인딩을 걸어 관련 문구를 출력하게 해주었다.

 

2) 이제 ts파일에서

 KeyUpFunc()을 정의해보자.

 

-----.ts파일------
export class KeyUpComponent {

   printtt= ' '; 

   KeyUpFunc ( event : any )  {

       event.target //이렇게 하면 DOM객체로 이벤트 발생한 타겟을 가리키게 된다.

       printtt + = event.target.value ;

   }

 

 

이렇게 우리는 이벤트를 처리 할 수 있게 되었다.  또한 Target 을 통해 DOM 조작도 가능해진다.

 

 

 

II. 실시간으로 데이터 바인딩 해주는 방법

 

<input #abc (keyup)="0">               //keyup 을 특별한 기능을 해주는  함수가 없이 
           		     	       //= " 0 " 으로 해준이유는 데이터 바인딩을 실시간으로 해주기 위해서이다

<p> {{abc.value}} </p>