이벤트 핸들링
이벤트
- 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속성값을 토대로 입력값에 접근할 수 있음
