이벤트 리스너 달기(콜백함수)

addEventListener

<input type="text">
<button>입력</button>
<script>
  const number = parseInt(prompt('몇 명이 참가하나요?'), 10);
  alert(number);
  const yesOrNo = confirm('맞나요?');

  document.querySelector('input').addEventListener('input', function() {
    console.log('글자 입력');
  });
  document.querySelector('button').addEventListener('click', function() {
    console.log('버튼 클릭');
  });

 

글자를 입력하는 event 이름은 input이다. 이름없는 함수를 넣어주면 input에 (input = 입력) 입력 할때마다 함수부분이 계속 실행된다.

 

마찬가지로 button을 클릭할때마다 함수부분이 계속 실행된다.

 

 

input에 글자를 입력하니 함수(콘솔에 '글자 입력' 출력)를 실행하는 모습

 

 

버튼을 클릭하니 함수(콘솔에 '버튼 클릭' 출력)를 실행하는 모습

 

태그.addEventListener('이벤트 이름', 리스너함수); 리스너함수 or 콜백함수 라고 부름. 콜백 = 전화를 다시 걸어주다.

콜백함수 = 어떤 동작이 실행되고 난 뒤에 연이어 실행되는 함수

ex) 클릭을 하고 난 뒤에 연이어서 실행되는 함수

 

이벤트리스너의 리스너함수

= 클릭한 뒤에 이어서 호출되는 함수니까 콜백함수

= 이름이 없으니까 익명함수

 

const onClick = function()  {
  console.log('버튼 클릭');
}
document.querySelector('button').addEventListener('click', onClick);

 

이렇게 함수를 바깥으로 빼서 이름을 달아주고 쓰기도 한다. 이 때 조심할 것은 ('click', onClick()) 함수라고 해서 이렇게 onClick뒤에 ()를 붙이면 안된다.

 

뒤에 ()를 붙이면 함수를 호출하는 것임. -> 함수를 호출하면 리턴값을 남긴다. -> 위 코드를 예시로 보면 return undefined 생략되어 있으니 addEventListener('click', undefined); 와 같은 의미가 된다. -> 함수자리에 undefined를 넣으면 제대로 동작하지 않는다. -> 그래서 함수 이름만 넣는것이다.

 

 

그럼 둘 중에 뭐를 써야할까 (함수를 안에 쓰는 것, 변수를 지정해서 바깥으로 빼는 것)

상관은 없음.

변수로 쓰는 이유는 어떤 것을 기억하고 여러번 사용하기 위해서.

그래서 여러번 쓰일 때는 변수로 쓰고 여러번 안쓰일때는 함수를 안에 써도 된다. 자유임.

 

 

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

const onClick = () => {
  console.log('버튼 클릭');
};
document.querySelector('button').addEventListener('click', onClick);

 

이렇게 화살표 함수로 써도 된다. 화살표 함수의 장점: 코드가 짧아진다.

화살표 함수와 function을 넣는것과 동작이 다르지만 아직까지는 같다. 나중에 배울것임.

 

 

글자 입력할때 사용자가 어떤 글자를 입력했는지 그것까지 보기 위해서

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

event객체에 target객체에 value 여기에 값이 들어있다.

 

 

실행했을때 아래와 같이 어떤 글자를 입력했는지 볼 수 있다.

그래서 버튼클릭 이전에 마지막 값이 사용자가 입력한 값이 된다. => 마지막 값을 입력했다고 생각하면 된다.