[JS] 핸들링 클릭 이벤트(handling click events)

확인 단추를 클릭하면 응용 프로그램이 실제로 뭔가를 해보도록 하겠다. 이게 코드가 DOM에서 발생하는 뭔가에 반응하는 첫번째 시간이 될거다. 일단 그렇게 하려면 이벤트 리스너(event listener)가 필요하다.

 

Event는 페이지에서 일어나는거다.

예를 들어 마우스 클릭, 마우스 무빙, 키 프레스 등

 

Event  listener의 특징은 이벤트가 발생하길 기다렸다가 반응할 수 있다.

이벤트를 듣기 위해서는 먼저 이벤트가 발생해야할 요소를 선택해야 한다. 

핑크색 박스안에 있는 이 버튼 요소의 이벤트를 들어야 한다. 

이 Check 버튼말이다. 내가 관심있는 클릭이 여기서 발생할 것이다. 

 

이 버튼을 클릭하면 뭔가 일어나야 한다. 

document.querySelector('.check');

html 파일로 들어가 class명을 확인하고 querySelector안에 클래스 명을 적었다. 이제 이 코드 즉 요소를 반환해보겠다.

 

 

 

document.querySelector('.check').addEventListener('click');

그러면 그 요소에서 addEventListener메서드를 호출할 수 있다. 괄호를 한버 더 작성하고 호출해야한다. JS에서 이벤트를 듣는 다양한 방법이 있다. 하지만 이 addEventListener은 메서드가 가장 좋고 가장 많이 사용되는 방법이다. 이 addEventListener은 메서드로 가서 먼저 이벤트 형식을 통과해야 한다. 괄호 사이에 click을 적어주면 저 함수에 전달하는 첫 번째 인수인거다. 하지만 이제 이벤트 리스너에게 지시를 내려야 한다. 기본적으로 클릭 이벤트에 대한 반응을 지정해야한다. 그렇게 하려면 함수를 정의해서 해야한다. 그 함수는 이 Check 버튼에서 클릭 이벤트가 발생할 때마다 실행되어야 할 코드를 포함하고 있다. 그 함수를 이벤트 처리기(event handler)라고 부른다. 이 메서드, 이 addEventListener 메서드는 특별한 종류의 함수이다. 그 이유는 두번째 인수를 즉 이벤트 처리기 기능을 기대하기 때문이다. 다시 한번더 두번째 인수로 함수 값을 인수로 넘겨야한다. 

ㅇ

일단 함수는 값이라는 걸 기억하면 된다. 함수가 그냥 값이라면 다른 함수에도 인수로 넘길 수 있다. 문자열이나 숫자 같은 다른 값처럼 말이다. 

document.querySelector('.check').addEventListener('click', function () {
  console.log(document.querySelector('.guess').value);
});

9를 웹에서 입력하여 클릭하면 큰솔창에 9가 출력되는 걸 확인할 수 있다. 

 

다시 정리를 해보자면!

querySelector로 check 버튼을 선택했다. 그런 다음 해당 요소에서 addEventListener 메서드를  이용해 이벤트 핸들러를 첨부했다. 이벤트 처리기는 function () { console.log(document.querySelector('.guess').value);} ← 이 함수이다. 저 함수는 addEventListener함수에 메서드를 전달한 것이다.  

첫번째 인수로는 click 이벤트 리스너의 이름이 있다. 두번째 인수로는 함수 값을 갖게되었다. 이 함수는 단순히 이벤트가 발생할 때마다 실행하고자 하는 코드르 포함하고 있다. 그리고 이 함수는 어디서도 호출하지 않는다. 여기서 함수만 정의하고 이벤트 처리기로 넘긴다. JS 엔진이라 이벤트가 발생하자마자 이 함수를 호출할 것이다. 이 함수는 일단 스크립트가 실행되면 즉시 호출되지 않는다. 이 함수는 이벤트가 발생하자마자 호출되는 이유는 괄호를 써서 함수를 호출하지 않았으니까 그렇다. 이제 그걸 addEventListener함수에 전달하고 있다.

---

이제 클릭하면 당연히 이 입력 필드에서 이 숫자는 검색되어야 한다. 

로그인하는 대신 변수에 실제로 저장한다.

document.querySelector('.check').addEventListener('click', function () {
  const guess = document.querySelector('.guess').value;
});

그 다음 큰솔에 로그인해서 출력한다.

document.querySelector('.check').addEventListener('click', function () {
  const guess = document.querySelector('.guess').value;
  console.log(guess);
});

먼저 그 값을 변수에 저장하고 나중에 그걸 기록했다. 기본 섹션에서 사용자 인터페이스에서 뭔가를 얻을 때는 (예를 들어 ㅁ입려필드에서) 그건 항상 문자열이다. 

 

 

document.querySelector('.check').addEventListener('click', function () {
  const guess = Number(document.querySelector('.guess').value);
  console.log(guess, typeof guess);
});

숫자와 숫자를 비교하고 싶다면 먼저 문자열을 숫자로 변환해야한다. 그래서 숫자로 변환해봤더니 숫자가 나왔다.

---

값이 없으면 큰솔에 응답으로 뭔가를 프린트할 수 있다.그래서 추측이 불가능하면 이렇게 할 수 있다. 

document.querySelector('.check').addEventListener('click', function () {
  const guess = Number(document.querySelector('.guess').value);
  console.log(guess, typeof guess);

  if (!guess) {
  }
});

아무것도 입력을 안한 상태에서 Check를 눌렀더니 0이 나왔다. 0은 거짓 값이다. 저 if문 조건에서는 모든 값이 항상 불리언으로 평가될거다. 그래서 위와 같은 경우에는 0이므로 0은 거짓 값이다. 거짓으로 전환되었다. 하지만 거짓일때 뭔가 발생되길 원한다. 

 

여기서 참 값을 원할 경우?

document.querySelector('.check').addEventListener('click', function () {
  const guess = Number(document.querySelector('.guess').value);
  console.log(guess, typeof guess);

  if (!guess) {
    document.querySelector('.message').textContent = '⛔No number';
  }
});

 

간단히 부정 연산자를 이용해서 이 부울 값을 false에서 true로 바꾸겠다. 이 경우에는 메시지(No number)를 프린트하겠다.

0은 거짓이기 때문에 위와 같이⛔No number가 출력되는 것이다. NOT연산자를 이용해 true로 변환했다. 그러면 위의 코드블록을 실행할 수 있다.  왜냐하면 이 조건 자체가 참일 때 실행되기 때문이다.