18. 함수 정의하고 호출하기
함수 만드는 두 가지 방법
- 함수 선언식 -> 호이스팅 가능
function 함수명(){
//함수의 기능
}- 함수 표현식 -> 호이스팅 불가능
const 함수명 = function(){
//함수의 기능
}호이스팅이란?
함수 호출을 함수 만드는 것보다 먼저 하는 것
20. 이벤트 핸들링
이벤트(event)란?
이벤트란 DOM에서 발생하는 다양한 액션 또는 상호작용 동작을 나타내는 프로그래밍 인터페이스
e.g., 클릭 이벤트, 키다운 이벤트, 제출 이벤트
이벤트 핸들러
각각의 이벤트가 발생했을 때 어떤식으로 동작할 지를 정의하는 것을 이벤트 핸들러 등록이라고 한다
이벤트 핸들러란 이벤트가 발생되면 실행될 코드 블록을 뜻하며, 주로 함수가 이 역할을 담당한다
사용법
이벤트를 처리할 타겟을 선택하고 이벤트 핸들러 속성에 이벤트 핸들러를 대입
예시)
button.onclick = handleClick이때 함수 뒤에 () 붙이면 안됨!!
이벤트 핸들러를 등록하기 위해 이벤트 속성에 함수를 대입하는 것과 함수를 호출하는 것은 다름
addEventListener()
onclick, onkeydown과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것 보다 addEventListener 메소드를 활용하는 것이 더 편하고 유용함
사용법
addEventListener(이벤트명, 이벤트핸들러)
장점)
- 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재 -> removeEventListener
- 같은 타겟에 대해 다수의 핸들러를 등록할 수 있음
이벤트 객체
이벤트 객체는 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터
이를 활용하기 위해서는 이벤트 핸들러 함수에 매개변수를 추가하여 이벤트 발생 시마다 이벤트 객체를 전달받을 수 있도록 해야 함
예시)
// click 이벤트가 발생하면 함수 호출
// + 이때 자동으로 전달되는 이벤트 객체를 매개변수 event에 대입
target.addEventListener('click', function(event){})select에서 옵션을 선택했을 때 발생하는 이벤트는 'click'이 아니라 'change'이다
select.addEventListener('change', function(){})
21. value 속성
입력 요소로부터 값 읽어들이기
<input>, <select>처럼 사용자로부터 입력을 받는데 사용되는 요소들이 있다
여기에서 사용자가 입력한 값을 읽어들일 때는 요소의 value 속성으로 접근할 수 있다
<form>요소에서 접근
여러 입력 요소를 포함할 수 있는 <form> 요소로부터 여러 입력 값을 읽어들일 때는, 개별 입력 요소의 name 속성값을 토대로 입력값에 접근할 수 있다
예시)
<form>
<input name="이름" />
<input name="별명" />
<input type="submit" />
</form>const form = document.querySelector("form");
form.addEventListener("submit", funcion(e){
console.log(e.target.이름.value);
console.log(e.target.별명.value);
}