끝말잇기

선택자

보통 자바스크립트에서 HTML 태그를 가져오는 것을 '선택한다'고 표현한다.

선택을 할 수 있는 특별함수는 바로 'document.querySelector('선택자')'이다.

여기서 '선택자'라는 용어가 나오는데, 선택자는 HTML 태그를 선택할 수 있게하는 문자열이다.
이 함수를 통하여 HTML 태그에 해당하는 것이 실행되면 자바스크립트의 함수를 실행할 수 있게한다.

예시로 input 태그를 선택해보겠다.

const $input = document.querySelector('input');

그리고 HTML 태그에는 id나 class를 넣을 수 있는데 그 값들을 선택하는 기능이 있다.

id 선택 시, ('#id이름')

class 선택 시, ('.class이름')

또, 태그가 단일 일때는 querySelector('선택자')를 사용하지만, 여러개 일때는 querySelectorAll 함수를 사용한다.

콜백함수(리스너 함수)

함수 기본형태

태그.addEventListener('이벤트 이름', 리스너 함수);

여기서 태그를 document.querySelector('button') 으로 선택하였다.
이 태그에 addEventListener를 붙여 이벤트를 연결할 수 있다.
클릭 이벤트 이름은 click이다.
즉, 버튼을 클릭하면 onClickButton 함수가 실행되게 한다.

document.querySelector('button').addEventListener('click', onClickButton);

주의사항

리스너 함수를 넣는 자리에 함수를 넣어야하는데 ()를 붙여 넣으면 안된다.
즉, onClickButton 대신 onClickButton()을 넣으면 안된다.

why?

()를 붙이면 클릭과 상관없이 함수가 실행되기 때문이다.

함수 자체를 넣어야하고, ()를 붙여 함수를 실행해서는 안된다는 점에 주의하자.
예시를 들어 설명하겠다.

const onClick = function () {
	console.log('버튼 클릭');
    return Undefined;
}

document.querySelector('button').addEventListener('click', onClick());

위와 같이 함수() 형태로 넣었을 때, return 값이 Undefined이기 때문에 onClick() 자리에 Undefined 가 들어가게된다.
그렇기 때문에 함수() 대신 함수 형태로 넣어야하는 이유이다.

이 때, onClickButton 같은 함수를 콜백 함수(callback Function)이라고 한다.

함수 분리하기

태그.addEventListener('이벤트 이름', '함수');

에서 함수 부분을 따로 작성할 수 있다.

const onClick = function () {
	console.log('버튼 클릭');
}

document.querySelector('button').addEventListener('click', onClick);

사용자가 입력한 값 콘솔에 띄우기

사용자가 입력한 값을 콘솔에 띄우려면 '함수.target.value' 형태로 넣어야한다.

document.querySelector('input').addEventListener('input', (event) => {
	console.log('글자 입력', event.target.value);
});

TEST

이벤트 달 때, 사용하는 함수는?
1. querySelector
2. addListener
3. addEventListener
4. removeListener

정답 : 3