ch05.Input 여러 개 다루기,OnKeyPress 이벤트 핸들링

Input 여러 개 다루기

• input이 여러개일 경우 메서드를 여러 개 만들 수 있지만 비효율적이다.
• e.target.name 값을 활용한다.
  • e.target.name은 해당 Input의 name을 가리킨다.
• 같은 이벤트를 동작시켜야 하는  Input 2개

  • 

    name으로 구분할 것이다.
• e.target.name으로 구분

  • 

    e.target.name에 해당 이벤트를 발생시킨 input 태그의 name값이 들어오기 때문에 구분 가능
  • 객체 안에서 key를 [] 로 감싸게 되면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key로 사용된다.

    • const name = 'variantKey';
      const object = {
      	[name] : 'value' //name에 실제로 variantKey값이 들어간다
      }

      예시

OnKeyPress 이벤트 핸들링

• 키를 눌럿을때 발생하는 이벤트

• 

  KeyPress 이벤트

  key값이 Enter일 경우 Click이벤트가 발생한다.

• 

  Input 태그에 KeyPress 이벤트 바인딩