이벤트(event)란

DOM에서 발생하는 다양한 액션 또는 상호작용 동작을 나타내는 프로그래밍 인터페이스

예시

• 웹페이지 사용자가 버튼 클릭 -> 클릭 이벤트
• 웹페이지 사용자가 키보드 클릭 -> 키다운 이벤트
• 웹페이지 사용자가 입력 폼 내용 제출 -> 제출 이벤트
• 외 다수

이벤트가 발생했을 때?!

각각의 이벤트에 대한 이벤트 핸들러 정의 가능

이벤트 핸들러 - 이벤트가 발생되면 실행될 코드 블록, 주로 함수가 이 역할 담당
이벤트 핸들러 등록 - 이벤트 핸들러 역할을 수행할 함수를 정의하는 것

구문 기본 형태

이벤트를 처리할 타켓 선택 후 이벤트 핸들러 속성에 이벤트 핸들러 대입
[주의] - 이벤트 핸들러를 등록하기 위해 이벤트 속성에 함수를 대입하는 것과 함수 호출문을 대입하는 것은 다름

타켓.on이벤트명 = 이벤트핸들러 함수
-> button.onclick = handleClick

addEventListener()

onclick, onkeydown과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것보다 편하고 유용한 이벤트 처리방법

장점

• 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드 존재
• 같은 리스터(타겟)에 대해 다수의 핸들러를 등록할 수 있음
  
  addEventListener(이벤트명, 이벤트핸들러)

이벤트 객체

추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터

이벤트 핸들러 함수에 매개변수를 추가하여 이벤트 발생 시마다 전달받을 수 있게 해야함

// click 이벤트가 발생하면 함수 호출하겠다
target.addEventListener('click',function(){})

// click 이벤트가 발생하면 함수를 호출하겠다
// + 이때 자동으로 전달되는 이벤트 객체를 매개변수 event에 대입하겠다
target.addEvenListener('click', function(event){})

value

input, select처럼 사용자로부터 입력을 받는데 사용되는 요소들이 있는데, 여기서 사용자가 입력한 값을 읽을때 value속성에 접근

textContent와 value 차이

• textContent - 요소에 쓰여져 있는 텍스트에 접근
• value - 사용자가 직접 요소에 입력한 값에 접근

value 접근

입력 요소의 value에 접근하여 할 수 있는 일은 크게 두가지, 읽기와 쓰기

// 대상 요소의 사용자 입력값을 읽어 콘솔 출력
console.log(target.value)

// 대상 요소의 사용자 입력값을 "변경값"으로
target.value = "변경값"