[JavaScript - 12] 이벤트 핸들링과 Value 속성

이벤트 핸들링

이벤트

• DOM에서 발생하는 다양한 액션 또는 상호작용 동작을 나타내는 프로그래밍 인터페이스
• 이벤트 발생의 예
  • 웹페이지 사용자가 버튼 클릭
  • 웹페이지 사용자가 키보드를 누름
  • 웹페이지 사용자가 입력 폼의 내용 제출
  • 외 다수

• 각 이벤트에 대한 이벤트 핸들러(handler)를 정의할 수 있음
  • 이벤트 핸들러 : 이벤트가 발생되면 실행될 코드 블록으로 주로 함수가 이 역할을 담당
  • 이벤트 핸들러 역할을 수행하는 함수를 정의하는 것이 이벤트 핸들러 등록

• 이벤트를 처리할 타겟을 선택하고 이벤트 핸들러 속성에 이벤트 핸들러를 대입
  • 이벤트 속성에 함수를 대입할 때는 소괄호(’()’)없이 대입

addEvnetListenet()

• onclick, onkeydonw과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것보다 편하고 유용한 처리 방법은 addEventListener 메서드를 사용하는 것
  • 장점
    • 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재
    • 같은 리스너(타켓)에 대해 다수의 핸들러 등록 가능
    • addEventListener(이벤트명, 이벤트 핸들러)

이벤트 객체

• 추가적인 기능과 정보를 제공하기 위해 이벤트핸들러에 자동으로 전달되는 데이터
• 활용하기 위해서는 이벤트 핸들러 함수에 매개변수를 추가하여 이벤트 발생 시마다 전달받을 수 있도록 해야 함
• 받아서 쓰는 방법

//함수 호출
target.addEnventListener('click', function(){})

//함수 호출과 자동으로 전달되는 이벤트 객체를 매개변수 envent에 대입
//함수 호출
target.addEnventListener('click', function(evnet){})

 

value속성 이해하기

• <input>, <select>처럼 사용자로부터 입력을 받을 때 사용하는 요소가 있는데 이 값을 읽어들이 때는 요소의 value 속성에 접근
  • 요소에 쓰인 텍스트 접근 : textContent
  • 사용자가 직접 요소에 입력한 값에 접근 : value

• value에 접근하여 할 수 있는 읽은 크게 두 가지, 읽기와 쓰기

form요소

• 여러 입력 요소를 포함할 수 있는 폼 요소로부터 여러 입력 값을 읽어 들일 때는, 개별 입력 요소의 name속성값을 토대로 입력값에 접근할 수 있음