비슷한 2개의 이벤트들의 비교(keyup, change, focus) + Number

Sming·2022년 5월 19일

비슷한 2개의 이벤트들

input태그내에서 입력(텍스트 입력)을 변화할때마다 change이벤트가 발생할것 같지만 실제로 change이벤트는 input태그의 focus가 잃을때 발생한다.

그래서 input태그가 입력받을때마다 이벤트를 부르고 싶다면 input 이벤트를 사용해야한다.

둘다 키를 입력할때 발생하는 이벤트이지만 keydown은 키를 입력한 순간에 발생하고 keyup은 키를 뗀순간 발생하는 이벤트이다.

keydown -> 실제 키 입력 이벤트 기본동작 -> keyup

그래서 keyup에서 event.preventDefault()를 해봤자 이미 기본동작이 끝난 상황이라서 작동이 하지 않을것이다.

pressdownEvent(e) {
  console.log(e.target.value);
}

pressupEvent(e) {
  console.log(e.target.value);
}

텅 빈 input에 1을 친다면 pressdownEvent에서는 이미 함수가 실행되고 기본 동작을 하기때문에 여전히 빈 문자열이 나올것이다. 하지만 pressupEvent에서는 1이 정상적으로 나오게 된다.

이 상태에서 Backspace를 이용하여 지워본다면 pressdownEvent에서는 1이 나올것이고 pressupEvent에서는 지운다음의 결과를 받아오기에 텅 빈문자열이 나오게 된다.

위의 2개와 다르게 이것들은 실제로 완전히 같은 동작을 실행한다.
focus와 focusin이벤트는 요소가 포커스를 얻을때 실행하는 이벤트이고 blur와 focusout은 요소의 포커스를 잃을때 발생하는 이벤트이다. 그런데 왜 2쌍으로 나누어 졌을까?

이것들의 차이는 바로 이벤트 버블링 여부이다.

focus와 blur는 이벤트 버블링이 발생하지 않고 focusin과 focusout은 이벤트 버블링이 발생한다.

그래서 이벤트 버블링에 의한 사이드 이펙트를 발생하고 싶지않으면 blur, focus를 상위요소의 이벤트까지 발생시키고 싶다면 focusin, focusout을 쓰면 된다.

2개는 이벤트가 아니긴 하지만 겉으로 보기엔 같은 동작인데 차이가 있어서 같은 글에 적기로 하였다.

둘다 문자열을 숫자로 바꿔주는 기능을 하는데 특정 예제에서는 서로 다른 값을 내보낸다.

const str1 = '2022년도';
Number(str1) // NaN
Number.parseInt(str1, 10) // 2022

const str2 = '';
Number(str2)// 0
Number.parseInt(str2, 10) //NaN

const str3 = '가1나';
Number(str3)// NaN
Number.parseInt(str3, 10) // NaN

parseInt는 시작이 숫자로하지않으면 NaN을 출력하며 시작이 숫자로 한다면 이어지는 숫자를 파싱하여 값을 내보냅니다.

하지만 Number은 문자가 들어가있다면 NaN을 내보내고 false로 평가되는 값이 안으로 들어간다면 무조건 0이 나오게 됩니다( [], 0, false, '')

정확한 파싱을 원한다면 parseInt를 빠른 속도를 원한다면 Number를 사용한다고 합니다.

딩구르르